CSS, HTML und Javascript mit {stil}

CSS als Datei, style-Tag, Import, inline

CSS einbinden: CSS-Datei, CSS Import, CSS Reset

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

  • Externe CSS-Datei wird durch ein link-Tag im HEAD der HTML-Datei eingebunden
  • style-Tag im HEAD oder BODY des HTML-Dokuments
  • Import einer externen CSS-Datei innerhalb des style-Tags
  • Inline CSS: style-Attribut im HTML-Tag

Alle Methoden dürfen gleichzeitig angewendet werden. 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: inline-CSS im style-Attribut überschreibt CSS im style-Tagstyle.cssa { color: #c99 }page.html<body><li><a style="color: #acc"></a></li></body><style>li a { color: orange }</style>
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 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.

<link href="style.css" type="text/css" media="screen" />
<link href="theme/style.css" type="text/css" media="print" />
<link href="style-26.css" type="text/css" 
         media="screen, projection" title="26-Zoll-Display" />

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.

body { padding: 1em; font-size: 0.9em; }
p { max-width: 38em; color: rgb(30,30,30); }

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 mit scoped-Attribut

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.

Inzwischen wurde das scoped-Attribut wieder abgeschafft und die Diskussion um <link> im body-Tag lebt wieder.

Inline CSS: style-Attribute

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>
!IMPORTANT CSS Reset div.nav li a @import * .col-left