Benannte Farben

Farben machen eine Seite angenehm anzusehen und leichter lesbar. In dieser Lektion färben wir unsere Katzenseite ein und probieren alle Arten aus, eine Farbe in CSS zu schreiben:

• benannte Farben, etwa green oder white,
• RGB-Farben, gemischt aus rotem, grünem und blauem Licht,
• Hexadezimalfarben, die nur eine kürzere Schreibweise für RGB-Farben sind,
• HSL-Farben, beschrieben durch Farbton, Sättigung und Helligkeit.

Für diese Lektion haben wir die Katzenseite noch einmal vorbereitet, mit einem kurzen Stylesheet. Sieh dir style.css im Editor an: Es hat zwei Regeln, und jede verwendet eine andere Farbeigenschaft:

• color legt die Farbe des Textes fest, auch Vordergrundfarbe genannt. Dank der Regel für #titel ist die Hauptüberschrift weiß.
• background-color legt die Farbe des Hintergrunds eines Elements fest, der Fläche hinter seinem Inhalt. Dank der Regel für .titel-hintergrund ist die Fläche um die Hauptüberschrift schwarz.

Beide Eigenschaften akzeptieren eine Farbe in jedem der obigen Formate.

Am einfachsten schreibst du eine Farbe mit ihrem Namen. CSS kennt 148 Farbnamen. Neben den einfachen wie red, blue oder gray gibt es auch tomato, gold, skyblue oder orchid. Groß- und Kleinschreibung spielen keine Rolle, aber Farbnamen schreibt man meist klein:

p {
	color: tomato;
}

Namen sind leicht zu lesen und zu merken, aber es gibt nur 148. Die anderen Formate können mehr als 16 Millionen Farben beschreiben, sodass wir genau den gewünschten Farbton wählen können.