HEX-Farben

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

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

Jedes Ziffernpaar im Code steht für die Intensität einer dieser Primärfarben und reicht von 00 (keine Intensität) bis FF (volle Intensität). Hex-Farben bieten eine breite Palette an Farboptionen und werden im Webdesign häufig 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; /* Rot */
    background-color: #00FF00; /* Grün */
}

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

p {
    color: #F00; /* Rot (entspricht #FF0000) */
    background-color: #0F0; /* Grün (entspricht #00FF00) */
}

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit zwei Überschriften (<h1> und <h2>) und einem Absatz (<p>) gegeben. Deine Aufgabe ist es, hexadezimale Farbcodes für Hintergrundfarben zu verwenden. Folge den folgenden Schritten:

Schreibe eine CSS-Regel für das Element <h1>. Setze die Hintergrundfarbe mithilfe der Hex-Farbe #BF00FF auf elektrisches Violett.
Schreibe eine CSS-Regel für das Element <h2>. Setze die Hintergrundfarbe mithilfe von #39FF14 auf Neongrün.
Schreibe eine CSS-Regel für alle <p>-Elemente. Setze die Hintergrundfarbe mithilfe von #D3D3D3 auf Hellgrau.

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>