Die CSS Kaskade
Weil 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 ist nicht auf eine externe CSS-Datei beschränkt. Mit HTML link-Elementen und der import-Regel können beliebig viele externe CSS-Dateien eingebunden werden.
Grundsätzlich galt es vor HTTP2 als besser, nicht zu viele CSS-Dateien anzulegen. Jede CSS-Datei wird mit einem HTTP-Request geladen – das kostete vor allem den mobilen Geräten zusätzliche Ladezeit. Mit HTTP/2 kann die Trennung in mehrere CSS-Dateien zu einer besseren Übersicht und Organisation beitragen.
Damit eine große CSS-Datei übersichtlich bliebt, helfen ein CSS-Reset, eine strikte Organisation und eine saubere Struktur.
Link-Element für externe CSS-Dateien
Eine externe CSS-Datei mittels Link-Element im HEAD der Seite ist die erste Wahl, wenn mehr als ein HTML-Dokument mit denselben CSS-Regeln formatiert werden soll. link-Elemente 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/print.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 darf nur CSS-Anweisungen enthalten, aber kann mittels @import eine externe CSS-Datei laden.
style-Tag im head der Seite
Innerhalb von style-Tags stehen i.d.R. CSS-Eigenschaften, die individuell für das aktuelle Dokument gelten – also Abweichungen von den generellen Stylesheet-Regeln, die in link-Tags als CSS-Dateien eingebunden sind.
Die CSS-Regeln aus lokalen style-Elementen überschreiben Eigenschaften aus globalen CSS-Dateien.
<style media="projection">
body { font-size: 1.1em; }
</style>
style-Elemente im HEAD der HTML-Datei können neben direkte Vereinbarungen von CSS-Eigenschaften externe CSS-Dateien mittels @import-Regel einbinden.
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 Berlin.
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.
