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: silver; }
   </style>

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

4. <h4 style="background: 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: 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 scoped

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 kann das style-Tag mit dem Attribut scoped ins body-Element gesetzt werden. Dann gelten die Regeln nur unterhalb des Elements, in dem das style-Tag notiert ist.

Allerdings befolgt zurzeit nur Firefox diese Regel. Alle anderen Browser wenden die Regeln auf alle Elemente des Dokuments an.

Unter HTML und dem strengen Regelwerk von XHTML war das style-Tag nur im head-Element der Seite erlaubt. Jetzt gibt ein style-Tag im body Diskussionsstoff in den Foren: Ist das sauber oder ist es nicht sauber?

Der Validator sagt beim style-Tag im body der Seite: Alles ok.

Auf jeden Fall ist ein style-Tag im body-Tag »sauberer« als CSS inline im style-Attribut. Obendrein erlaubt ein style-Tag mehr Feinheiten (z.B. Pseudo-Elemente und Pseudo-Klassen wie ::before und ::after).

<section>
   <style scoped>
      h3 { color: darkslategray}
      .demo img { padding: 1em; float: right }
      .demo:after { content: ' '; display: table; clear: both }
   </style>
   <div class="demo">
      <img src="pic.png" alt="scoped">
      <p>Es beliebte bisweilen ihm im Kamin seine schneeweißen Segeltuchschuh auszuziehen.</p>
   </div>
</section>

Viele Sonderregeln müssen auf diese Weise nicht in die globale CSS-Datei übernommen werden. Die Suche nach Fehlern im CSS und nach Ungereimtheiten in der Darstellung wird einfacher.

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>