Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

5.8 Styles können an drei verschiedenen Stellen definiert werden

Bis jetzt kennen Sie nur CSS-Regeln in einem externen Stylesheet, aber es gibt drei verschiedene Möglichkeiten, CSS-Regeln zu speichern.

1. CSS-Regeln in einer externen CSS-Datei

CSS-Regeln werden – wie am Anfang dieses Kapitels gesehen – meistens in einer eigenen Datei mit der Endung *.css gespeichert. Die Verbindung zwischen Webseite und CSS-Datei erfolgt im head des HTMLQuelltextes mithilfe des Elements link:

<head>
  <!-- Andere HTML-Elemente -->
  <link href="dateiname.css" rel="stylesheet" type="text/css" />
</head>

Details zur Einbindung von externen Stylesheets

Weiter hinten erfahren Sie, wie man per CSS mit link eine Druckversion erstellt. Und mit @import gibt es eine Alternative zu link, über die Sie im Abschnitt über »Inline-Patches« mehr lesen.

2. Zwischen <head> und </head>: das Element style

CSS-Regeln können mit dem HTML-Element style auch im head einer HTML-Datei gespeichert werden:

<head>
  <!-- Andere HTML-Elemente -->
  <style type="text/css">
    body { background-color: yellow; /* nur für diese Webseite */ }
  </style>

</head>

Zwischen den Tags <style type="text/css"> und </style> stehen ganz normale CSS-Regeln, die nur für diese eine Webseite gelten.

3. Direkt im HTML-Element: Das Attribut style

Die dritte Methode ist es, CSS-Regeln direkt in den Anfangs-Tag eines HTML-Elements zu schreiben. Diese Methode wird manchmal auch Inline-Style genannt, weil die CSS-Deklarationen direkt im  HTML-Element stehen (ohne geschweifte Klammern drum herum):

<p style="background-color: #c0c0c0; color: red;">Rot auf grau!</p>

Roter Text und grauer Hintergrund. Diese beiden Deklarationen gelten nur für diesen einen Absatz. Besonders zum Experimentieren während der Erstellung einer Webseite sind Inline-Styles sehr praktisch.

Vorfahrt: Welche Styles gewinnen?

Die Dreiteilung von Styles als externe Datei, als Element im HTML-Head und als Attribut direkt im Anfangs-Tag des Elements ist hierarchisch gestaffelt, sodass der Browser immer genau weiß, welche Regel er anwenden muss.

Der Grundsatz lautet »Je dichter am zu gestaltenden Text, desto wichtiger«:

  • CSS-Regeln im HTML-Element haben Vorrang vor denen im head einer Seite.
  • Bei CSS-Regeln im head ist die Reihenfolge im Quelltext wichtig:
    Die im head deklarierten Styles gewinnen, sofern sie nach dem per link eingebundenen externen Stylesheet stehen.

Durch diese Staffelung können Sie in einer separaten CSS-Datei ein einheitliches Aussehen für die ganze Site festlegen und Abweichungen davon für jede einzelne Webseite und sogar für jedes einzelne HTML-Element definieren.

Bei der Einbindung von CSS empfiehlt sich folgende Vorgehensweise:

  • Schreiben Sie so viel wie möglich in eine externe CSS-Datei.
  • Benutzen Sie Styles im HTML-Quelltext so sparsam wie möglich.
Die Teilung der Styles ist Teil der Kaskade

Die Speicherung der Styles an drei verschiedenen Orten ist Teil der Kaskade. Details zur kompletten Kaskade finden Sie im Kapitel über »CSS und der Browser: Kaskade, Vererbung oder Standardwert«.