Colors

An anderer Stelle im CSS Tutorial haben Sie bereits die verschiedenen Möglichkeiten zur Definition von Farben kennen gelernt. Diese und die nächsten Teile beschäftigen sich mit den CSS-Befehlen, mit denen Sie Elementen Farben und auch Hintergründe zuweisen können.

Bislang war es immer nötig für jeden Textbereich, der in einer anderen Farbe als der Standardfarbe erscheinen sollte, den Befehl

<FONT color="red"> ... </FONT>

zu notieren.

Wenn Sie beispielsweise auf Ihrer Webseite eventuelle Fehlermeldungen immer in einer Warnfarbe (Rot) ausgeben möchten, können Sie statt viele FONT-Tags auch folgenden CSS-Befehl verwenden:

P.fehler { color: red; }

<P class="fehler">Fehler</P>

Alle Elemente mit der Klasse “fehler” werden von nun an in Rot dargestellt.

Der color-Befehl sieht in der Übersicht so aus:

Der Befehl ist immer für die Vordergrundfarbe eines Elementes zuständig.

Sie könnten z.B. folgende Definition benutzen, um die Links auf allen Webseiten identisch aussehen zu lassen.

BODY { color: black; }
A:link { color: blue; }
A:active { color: red; }
A:visited { color: purple; }

Die Zeile BODY { color: black; } sorgt dafür, dass alle Texte einer Webseite standardmäßig in schwarz dargestellt werden.

Da der Befehl color sich nicht nur auf den Text an sich bezieht, werden z.B. Rahmen um Elemente ebenfalls in der gleichen Farbe dargestellt:

P.rahmen {
color: green;
border-style: solid;
}

<P class="rahmen">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Nicht nur der Text, sondern auch der Rahmen ist grün. Die zusätzliche Angabe von border-color: black; würde dies verhindern (zum Thema “Rahmen” erfahren Sie später mehr).

Farbangaben werden vererbt, d.h. befände sich im obigen Text ein kursiver Bereich, wäre dieser ebenfalls grün, was sich aber durch folgende Angabe natürlich verhindern ließe:

I { color: blue; }

Ein Problem, das im Zusammenhang mit der Vererbung auftritt, ist, dass Farbangaben in Tabellen nicht vererbt werden. Trotz der Angabe

BODY { color: yellow; } 

werden Texte in Tabellenzellen immer noch in der Standardfarbe des Browsers dargestellt. Um dies zu verhindern, notieren Sie einfach

BODY, TABLE { color: yellow; } 

bzw.

 BODY, TABLE, TD { color: yellow; }

(damit wird bei den meisten Browsern eine korrekte Darstellung erzeugt).

Nicht nur Texte lassen sich in der Farbe anpassen, auch die sonst sehr starren Formularfelder sind vor einer farblichen Gestaltung nicht mehr sicher:

INPUT { color: red; }
SELECT { color: blue; }

Da auch Radiobuttons, Checkboxen und anderen Buttons vom Typ “Input” sind, müssen eigene Klassen für die jeweiligen Elemente definiert werden, sofern die verschiedenen Formularfelder unterschiedlich formatiert werden sollen:

INPUT.radio { color: blue; }
INPUT.checkbox { color: yellow; }
INPUT.submit { color: black; }

<INPUT class="radio" type="radio">
<INPUT class="checkbox" type="checkbox">
<INPUT class="submit" type="submit">

Hintergrundfarben (background-color)

Neben den Vordergrundfarben lassen sich natürlich auch Hintergründe von Elementen definieren. Dazu gibt es den Befehl background-color:

Einem Absatz lässt sich so eine Hintergrundfarbe zuordnen:

P { background-color: yellow; }

Hintergrundfarben lassen sich für alle Elemente setzen, vom BODY-Element bis hin zum Link.