CSS als Datei, style-Tag, Import, inline

CSS in HTML-Datei einbinden

Auf vier Wegen kommt CSS in die HTML-Elemente der Webseite: als externe CSS-Datei in einem link-Tag, in einem style-Element im Kopf der Seite, als Import einer externen CSS-Datei in einem style-Tag oder in eine CSS-Datei, als inline-CSS im style-Attribut eines Tags. Alle Methoden dürfen gemischt werden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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 Link, Style, Inline
Je näher die Regel am Element liegt, desto mehr Gewicht hat sie: Die CSS-Eigenschaft im a-Tag gewinnt. CSS Cascading – Kaskade: inline-CSS im style-Attribut überschreibt CSS im style-Tag

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.