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 darstellt, aus der eine Farbe besteht.

Jedes Ziffernpaar im Code repräsentiert die Intensität einer dieser Primärfarben im Bereich 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 die Kurzschreibweise für Hex-Farben verwenden, wenn beide Ziffern jedes Paars 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 Hintergrundfarben zu verwenden. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel für das Element <h1>. Setze die Hintergrundfarbe mithilfe der Hex-Farbe #BF00FF auf elektrisches Lila.
Schreibe eine CSS-Regel für das<h2>-Element. 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>