RGB-Farben

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

In CSS sind RGB-Farben eine Möglichkeit, Farben mithilfe der rgb() Funktionsschreibweise zu definieren. RGB steht für Rot, Grün und Blau, und jede Farbe wird durch einen Wert im Bereich von 0 bis 255 dargestellt. Durch die Kombination verschiedener Intensitäten dieser drei Primärfarben können Sie ein breites Spektrum an Farben erstellen.

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

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

Zum Beispiel:

p {
    color: rgb(255, 0, 0); /* Rot */
    background-color: rgb(0, 255, 0); /* Grün */
}

h1 {
    color: rgb(0, 0, 255); /* Blau */
}

.highlight {
    background-color: rgb(255, 255, 0); /* Gelb */
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>). Geben Sie allen Elementen auf der Seite eine Hintergrundfarbe und eine Textfarbe Ihrer Wahl; verwenden Sie dazu rgb().

Die Standardfarben werden nicht akzeptiert!

Spickzettel

RGB-Farben verwenden die rgb()-Funktionsschreibweise mit Werten von 0 bis 255 für Rot, Grün und Blau:

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

Beispiele:

p {
    color: rgb(255, 0, 0); /* Rot */
    background-color: rgb(0, 255, 0); /* Grün */
}

h1 {
    color: rgb(0, 0, 255); /* Blau */
}

.highlight {
    background-color: rgb(255, 255, 0); /* Gelb */
}

Probier es selbst

<html>
<head>
    <title>RGB Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>