HEX-Farben

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy. Lektion 26 von 76.

Hex-Farben sind eine Möglichkeit, Farben mithilfe von Hexadezimalwerten festzulegen. Ein hexadezimaler Farbcode ist ein sechsstelliger Code, dem ein Rautezeichen (#) vorangestellt ist und der die Menge an rotem, grünem und blauem Licht darstellt, aus der eine Farbe besteht.

Jedes Ziffernpaar im Code stellt die Intensität einer dieser Primärfarben dar, von 00 (keine Intensität) bis FF (volle Intensität). HEX-Farben bieten eine große Auswahl an Farboptionen und werden häufig im Webdesign verwendet.

Hier ist die grundlegende Syntax für die Verwendung von Hex-Farben in CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Zum Beispiel:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

Du kannst auch eine Kurzschreibweise für Hex-Farben verwenden, wenn beide Ziffern in jedem Paar gleich sind. Zum Beispiel:

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit zwei Überschriften (<h1> und <h2>) und einem Absatz (<p>). Deine Aufgabe besteht darin, hexadezimale Farbcodes für background colors zu verwenden. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel für das Element <h1>. Setze die background color mithilfe der Hex-Farbe electric purple auf #BF00FF.
Schreibe eine CSS-Regel für das Element <h2>. Setze die background color mithilfe von #39FF14 auf neon green.
Schreibe eine CSS-Regel für alle <p>-Elemente. Setze die background color mithilfe von #D3D3D3 auf light gray.

REQUIRED OUTPUT FORMAT: [Your translated content here]

Probier es selbst

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>