CSS - Formatierung mit Cascading Style Sheets

Was ist CSS?

CSS steht für "Cascading Style Sheets". Style Sheets sind Formatvorlagen, wie man sie aus Textverarbeitungsprogrammen kennt. CSS und HTML bilden eine Einheit; CSS ohne HTML ist nutzlos, HTML ohne CSS ist hässlich. In HTML teilen wir dem Browser mit, welche Elemente unsere Webseite hat, welcher Teil also ein Absatz ist, wie viele Zellen unsere Tabelle haben soll und wie viele Punkte unsere Liste haben soll. In CSS sagen wir ihm nun, wie er diese Elemente darstellen soll. Unsere Absätze sollen links und rechts etwas eingerückt sein, als Hintergrundfarbe wünschen wir ein sanftes Grün. Die Listeneinträge sollen nicht mit einem Punkt abgesetzt werden, sondern mit einem kleinen Bildchen, das wir eigens erstellt haben. Und damit die Tabellen auch nicht übersehen werden, sollen sie mit einem knallrot gepunkteten Rahmen versehen werden.

/* Beispiel für die Formatierung von Links (Hover-Effekt) */
a { text-decoration:none; font-weight:bold;}
a:link { color:#E00000; }
a:visited { color:#800000; }
a:hover { background-color:#FFFF00; }
a:active { background-color:#CCFFFF; }

Was ist "Cascading" an CSS?

"Cascading" bedeutet "kaskierend", also "fallend", oder in unserem Zusammenhang eher "hierarchisch". Es gibt drei Möglichkeiten, CSS-Anweisungen unterzubringen - in einer eigenen Datei, im head-Bereich einer HTML-Datei oder als Direktformatierung beim betroffenen Element.

Die erste Variante entspricht dem Sinn von CSS am ehesten. Formatanweisung werden zentral abgelegt und können durch eine Referenzierung im head-Bereich von unendlich vielen HTML-Dateien genutzt werden. Der Segen dieser Organisationsstruktur offenbart sich, wenn man bei 1000 Seiten die Hintergrundfarbe ändern möchte: Man muss nicht 1000 HTML-Dateien ändern, sondern lediglich das Style Sheet, und schon gelten die Änderungen für alle Seiten, die ihre Formatierungen aus diesem Style Sheet beziehen.

Anstatt einer Referenzierung eines externen Style Sheets kann man die Formatierungsanweisungen auch direkt in einer HTML-Datei ablegen oder ein HTML-Element direkt formatieren. Die eben beschriebenen Vorteile sind damit nicht mehr gegeben. Außerdem tritt nun der kaskadierende Effekt ein: Bei Konflikten zwischen externem Style Sheet (z.B. Hintergrundfarbe grün), den Anweisungen in der HTML-Datei (z.B. Hintergrundfarbe blau) und der Direktformatierung (z.B. Hintergrundfarbe schwarz) setzt sich die Anweisungen durch, die am nächsten am betroffenen Element steht - der Hintergrund wird schwarz.

Aus den beschriebenen Gründen empfiehlt es sich also immer, eine externe CSS-Datei anzulegen. Für Tests und "Fummeleien" kann man die Direktformatierung bemühen, und wenn das Projekt nur aus einer HTML-Datei besteht, die man z.B. per Mail verschicken will, hat die Formatierung head-Bereich ihre Berechtigung.

Nicht zuletzt wegen der Möglichkeiten und der Struktur von CSS werden WYSIWYG-Editoren wie Frontpage niemals so effektiven Code schreiben können wie ein Mensch, der sich mit HTML und CSS auseinandersetzt. Selbst wenn diese Programme Formatierungen nicht direkt in HTML vornehmen - was z.B. mit dem font-Tag zwar möglich, aber nicht ratsam ist - und sie zumindest in CSS formatieren, so nutzen sie meist die Direktformatierung. Ein echtes WYSiWYG, das erlaubt, Elemente mit der Maus beliebig zu positionieren, zu verschieben und anzupassen, und dabei noch anständigen Quellcode schreibt, kann man sich bei genauerer Kenntnis der Hintergründe eigentlich kaum vorstellen.

Was muss man beim Einsatz von CSS beachten?

CSS wird von modernen Browsern fast komplett unterstützt. Dass trotzdem noch Browser vom Standard abweichen, ist ein nicht nachvollziehbares Manko, mit dem man jedoch leben muss und kann. Über Unterschiede in der Darstellung verschiedener Browser finden sich im WWW ausreichend Quellen; gerade in Diskussionsforen und im Usenet stößt man auf Quellen und Experten, die unglaublich tief in die Geheimnisse von CSS vorgedrungen sind. Es gibt keinen Grund, nicht wenigstens zur Formatierung von Links und Texten in CSS einzusteigen. Mit der Zeit wird man sich auch an andere Aufgaben wie etwa die Positionierung von Bereichen heranwagen. Bei der Erarbeitung eines komplexen Style Sheets - und vor allem vor dem Publizieren einer Website - empfiehlt sich die Fehlersuche mit dem CSS-Validator des W3-Consortiums (siehe Links).