Mehrere Stylesheets in einem HTML-Dokument

Um ein HTML-Dokument mittels CSS zu gestalten, gibt es verschiedene Möglichkeiten. Neben der Direktformatierung von HTML-Tags mit style="..." und der Definition von Styles im Dokument-Header ist es möglich, die Style-Anweisungen in eine separate Datei auszulagern. Der große Vorteil eines externen Stylesheets ist der, dass alle HTML-Dokumente einer Website auf das externe Stylesheet verweisen können. An einer zentralen Stelle kann somit das Layout dieser Webseite gestaltet werden.

Ein externes Stylesheet wird mit dem <link>-Element in das HTML-Dokument eingebunden. Es ist möglich, mehrere Stylesheets gleichzeitig einzubinden. In einfachsten Fall geschieht dies wie folgt:

  <link rel="stylesheet" type="text/css" href="styles/menu.css">
  <link rel="stylesheet" type="text/css" href="styles/inhalt.css">
  

Im Beispiel oben werden die Styles für verschiedene Bereiche des Dokuments in separaten CSS-Dateien verwaltet.

Es werden drei Arten von Stylesheets unterschieden: persistente Stylesheets, bevorzugte Stylesheets und alternative Stylesheets. Zu welchem Typ ein Stylesheet gehört, wird mit zusätzlichen Attributen im <link>-Element gesteuert.

Persistente Stylesheets

Ein persistentes Stylesheet wird mit

  <link rel="stylesheet" type="text/css">
  

in das HTML-Dokument eingebunden. Die so eingebundenen Stylesheets werden immer auf das HTML-Dokument angewendet. Es können mehrere persistente Stylesheets im HTML-Dokument angewendet werden. Die Style-Anweisungen in den verschiedenen Stylesheets addieren sich. Bei Konflikten hat der Style Priorität, der zuletzt definiert wird.

Bevorzugte Stylesheets

Ein bevorzugtes Stylesheet (preferred stylesheet) wird mit

  <link rel="stylesheet" type="text/css" title="Normal">
  

in das HTML-Dokument eingebunden. Es wird also zusätzlich das title-Attribut angegeben.

Auch bei den bevorzugten Stylesheets können mehrere gleichzeitig in das Dokument eingebunden werden. Es findet jedoch zu einem Zeitpunkt immer nur ein Stylesheet Anwendung. Ein Browser kann dem Benutzer z.B. in einem Menü die vorhandenen Stylesheets anzeigen, von denen der Benutzer dann eines auswählt.

Unglücklicherweise gibt die Definition von HTML 4.01 keinen Hinweis auf eine Reihenfolge. Einem Browser ist freigestellt, ob überhaupt ein bevorzugtes Stylesheet verwendet wird und welches dies sein wird, falls mehrere bevorzugte Stylesheets im Dokument referenziert werden.

Alternative Stylesheets

Alternative Stylesheets werden mit

  <link rel="alternate stylesheet" type="text/css" title="Winter"
        href="styles/winter.css">
  

eingebunden. Der Benutzer soll so zwischen einer "Default"-Darstellung und mehreren Alternativen wählen können. Falls der Benutzer ein alternatives Stylesheet auswählt, werden sämtliche Style-Anweisungen im bevorzugten Stylesheet ignoriert. Die Anweisungen in den persistenten Stylesheets kommen dagegen immer zur Anwendung.

Wenn ein Dokument geladen wird, wendet der Browser alle persistenden Stylesheets an und genau ein bevorzugtes Stylesheet. Alternative Stylesheets werden nur auf Benutzerwunsch aktiviert.