Wo können CSS-Stile definiert werden?

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

CSS können an drei verschiedenen Stellen definiert werden:

• innerhalb von HTML (Inline-Deklarationen genannt)
• zwischen <style> und </style>-Tags innerhalb des Header-Elements (Embedded-CSS)
• als externe CSS-Datei (External-CSS)

Inline-Deklarationen

Eine Stilanweisung lässt sich vollständig innerhalb eines entsprechenden HTML-Tags definieren. Sie werden Inline-Deklarationen genannt, weil sie innerhalb eines HTML-Dokuments stehen. Beinahe jedem HTML-Element lässt sich so direkt ein style-Attribut zuordnen. Um etwa eine Überschrift der zweiten Ordnung in einem Dokument in roten Großbuchstaben erscheinen zu lassen, können Sie den folgenden Code einsetzen:

Folgt man den weiteren Ausführungen in diesem Buch, bleibt das eher die Ausnahme. Wie schon angedeutet, ist die Trennung von Inhalt und Darstellung einer der wesentlichen Vorteile von CSS. Wenn man aber Stile in den HTML-Tags selbst definiert, ist die Trennung aufgehoben. Dieses Vorgehen empfiehlt sich daher nur für Testzwecke. Bevor man ein Stylesheet ordentlich im HTML-Header oder in einer externen Datei unterbringt, kann man so ihre Wirkung erst einmal testen.

Embedded-CSS

Die Definition der Stileigenschaften im Header einer HTML-Datei wird von vielen Webdesign-Anfängern oder zum Ausprobieren von CSS-Regeln verwendet. Es ist nicht meine bevorzugte Methode, hat aber den unbestrittenen Vorteil, dass sie einfach anzuwenden ist. Wir werden sie auch in diesem Buch hin und wieder einsetzen.

Um das Stylesheet zentral in einer HTML-Datei zu definieren, wird ein style-Block innerhalb des head-Bereichs angelegt. Im folgenden Beispiel ist er hervorgehoben:

Die CSS-Regeln innerhalb des style-Blocks werden auf alle darin definierten Teile des jeweiligen Dokuments angewandt. Im Beispiel weist etwa die erste Regel den Browser an, alle Überschriften erster und zweiter Ordnung (h1, h2) in grün darzustellen. Die zweite Regel stellt alle Überschriften dritter Ordnung (h3) in blau dar.

Geben Sie bitte auch Acht, dass jede Regel in einer neuen Zeile anfängt und jede Eigenschaft, die in einer Regel bestimmt wird, in einer eigenen Zeile eingerückt zwischen geschweiften Klammern steht. Technisch hat das zwar keine Auswirkung, die Lesbarkeit Ihres Codes wird aber damit deutlich verbessert, vor allem für Programmierer, die an JavaScript-Code gewöhnt sind.

External-CSS

Zu guter Letzt lassen sich CSS-Regeln auch in Dateien definieren, die komplett unabhängig von den HTML-Dokumenten einer Webseite angelegt und abgespeichert werden. Im HTML-Code verweist man einfach auf eine solche externe Datei, indem man ein <link>-Tag in den head-Abschnitt einfügt.

Im Beispiel enthält die Datei corpstyle.css eine Reihe extern definierter Stile, auf die von dieser Seite aus verwiesen wird. Der Inhalt dieser Datei könnte etwa so aussehen:

Diese Art der CSS-Definition benutze ich bevorzugt. Dafür gibt es mehrere Gründe:

Erstens ist es die unabhängigste der drei Methoden. Wenn Sie eine externe Stylesheet-Datei anlegen, können Sie die zentral festgelegten Stileigenschaften für beliebig viele Webseiten einsetzen. Sie müssen nur von jeder Webseite jeweils einen Link auf die zentrale CSS-Datei einfügen. Dies macht Ihre Website auch weitaus leichter wartbar. Die Änderung der Darstellung eines Elements, das in allen Seiten existiert, vereinfacht sich so auf die Änderung der entsprechenden Stilregel im externen Stylesheet. Wären auf Ihrer Site die Stylesheets in den HTML-Dateien selbst oder sogar in den Tags eingebettet, müssten die Stilregeln stets mühsam in den Code jeder einzelnen Seite eingefügt werden.

Zweitens werden separate CSS-Dateien vom Webbrowser als eigenständige Dateien behandelt. Wenn dieser zu einer neuen Seite wechselt und dort dasselbe Stylesheet verwendet wird, muss es nicht erneut heruntergeladen werden, weil es sich noch im Cache des Browsers befindet. Seiten mit externen Stylesheets sind daher schneller im Lade- und Aufbauprozess.

Und last but not least: Der Einsatz externer Stylesheets ist einfach professioneller und zeigt, dass Sie die Vorzüge der Trennung von Inhalt und Design verstanden haben und für Ihre tägliche Arbeit nutzen. Sie können die Stylesheets mit Ihren Kollegen diskutieren und analysieren, ihre Wirkungsweise austesten und mit ihnen als ernst zu nehmendem Teil Ihres Designs, und nicht als nachträglichen Einfall, arbeiten.