CSS als Datei, style-Tag, Import, inline

CSS in HTML-Datei einbinden

Auf vier Wegen kommt CSS in die HTML-Elemente der Webseite:

Alle Methoden dürfen gleichzeitig angewendet werden.

Die CSS Kaskade

Da sich CSS-Eigenschaften dabei gegenseitig überschreiben können, entsteht die CSS-Kaskade – daher der Begriff »Cascading Stylesheets«.

1. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

2. <style>
   h4 { background-color: silver; }
   </style>

3. <style>
   @import url("style.css") screen;
   </style>

4. <h4 style="background-color: silver">Inline-CSS</h4>
CSS Cascading – Kaskade: inline-CSS im style-Attribut überschreibt CSS im style-Tag
Je näher die Regel am Element liegt, desto mehr Gewicht hat sie: Die CSS-Eigenschaft im a-Tag gewinnt.

CSS ist nicht auf eine externe CSS-Datei beschränkt. Mit HTML link-Tags und der import-Regel können beliebig viele externe CSS-Dateien eingebunden werden.

Grundsätzlich ist es besser, nicht zu viele CSS-Dateien anzulegen. Jede CSS-Datei wird mit einem HTTP-Request geladen – das kostet vor allem bei den mobilen Geräte zusätzliche Ladezeit für die CSS-Dateien.

Damit eine große CSS-Datei übersichtlich bliebt, helfen ein CSS-Reset, eine strikte Organisation und eine saubere Struktur.

Link-Tag für externe CSS-Dateien

Eine externe CSS-Datei mittels Link-tag im head-Element der Seite ist die erste Wahl, wenn mehr als ein HTML-Dokument mit denselben CSS-Regeln formatiert werden soll. link-Tags werden im HEAD der HTML-Datei deklariert, dürfen aber auch am Ende der HTML-Datei stehen (um das initiale Laden der Seite nicht auszubremsen, wenn es für die Darstellung der Webseite im Browser nicht benötigt wird: print.css).

<head>
<link href="style.css" type="text/css" media="screen" />
…
</head>
<body>

<link href="theme/style.css" type="text/css" media="print" />
</body>

Das HTML-Attribut type weist den Browser an, nicht unterstützte Medientypen zu ignorieren. Ein Webbrowser soll auf dem Monitor also media="screen" lesen, aber media="print" für den Druck zu verwenden.

  • Der Browser soll immer alle mit rel="stylesheet" bezeichneten CSS-Datei als primäre Stylesheet-Dateien anwenden.
  • CSS-Dateien, die mit rel="alternate stylesheet" in das HTML-Dokument gebunden werden, soll der Browser ignorieren, bis der Benutzer oder eine Anwendung das Stylesheet aktiviert.

Die externe Stylesheet-Datei soll keine HTML-Tags enthalten, sondern nur Stylesheet-Anweisungen.

Import von CSS-Dateien im style-Tag

Innerhalb eines style-Tags werden i.d.R. CSS-Eigenschaften notiert, die individuell für das aktuelle Dokument gelten – also Abweichungen von den generellen Stylesheet-Regeln, die für alle Dokumente einer Webseite durch ein link-Tag eingebunden wurden.

Mittels des style-Tags können z.B. Stylesheet-Eigenschaften, die nur in einigen Dokumenten der Webseite benötigt werden, in die jeweiligen Seiten eingebunden werden.

Das style-Tag steht im HEAD der HTML-Datei und kann sowohl Anweisungen zum Laden externer CSS-Dateien als auch direkte Vereinbarungen von CSS-Eigenschaften enthalten. Eine externe CSS-Datei wird im style-Tag durch die Anweisung @import eingebunden (die @import-Anweisung darf nicht nur im style-Tag, sondern auch in einer CSS-Datei stehen).

Die @import-Regel muss dabei aber immer an Anfang des Style-Tags gesetzt werden.

<style type="text/css" title="text/css" media="screen">
   @import url(/style.css);
   @import url(/theme/style.css);
   pre { background-color: silver; border: 1px solid silver; }
   code { color: blue; }
</style>

@import ist keine empfohlenswerte Methode zum Einbinden einer CSS-Datei, denn importierte CSS-Dateien blockieren parallele Downloads. Der Browser muss warten, bis die importierte Datei geladen ist, bevor er weitere Dateien herunterladen kann.

Sinnvoll ist @import allenfalls, wenn sichergestellt werden soll, dass CSS-Eigenschaften vor anderen Eigenschaften geladen werden.

style-Tag

Das style-Tag wird i.d.R. in den HEAD der HTML-Seite gesetzt. CSS-Regeln, die hier notiert werden, überschreiben Eigenschaften aus globalen CSS-Dateien für die einzelne Seite.

<style media="projection">
   body { font-size: 1.1em; }
</style>

Mit HTML5 konnte das style-Tag mit dem Attribut scoped ins body-Element gesetzt werden. Dann sollten nur die Regeln unterhalb des Elements, in dem das style-Tag notiert ist, gelten. Allerdings befolgt nur Firefox diese Regel. Alle anderen Browser wenden die Regeln auf alle Elemente des Dokuments an.

Zwischenzeitlich wurde das scoped-Attribut wieder abgeschafft. Mit HTML 5.2 ist ein style-Element im body der Seite wieder erlaubt, aber es soll keinen störenden Wiederaufbau der Seite erzeugen.

Dass CSS-Stile nicht scoped – auf einen Bereich beschränkt – angewendet werden können, macht größere CSS-Dateien unübersichtlich und ist die hinterhältigste aller Fehlerquellen im CSS.

Kommt eine CSS-Eigenschaft in eine Bar in der Düsseldorfer Altstadt.
In einer Kneipe in Düsseldorf-Kaarst fällt ein Barhocker um.

Quelle: Irgendwo in Twitter, aber leider den Autor vergessen …

Inline CSS: style-Attribut

Das HTML-Attribut style bringt CSS-Eigenschaften direkt in ein HTML-Tag. Diese Technik ist unflexibel und wird nur in Einzelfällen angewendet.

<p style="color: red">Hier darf nicht geflüstert werden!</p>

Das Ändern von Inline CSS über das style-Attribut gehört auch zur Basisausrüstung von Javascript.

CSS Cascading: inline-CSS im style-Attribut überschreibt CSS im style-Tag style.cssa { color: #c99 }page.html<body><li><a style="color: #acc"></a></li></body><style>li a { color: orange }</style>