CSS einbinden: Die drei Wege

vom 16.11.2019 von Mark Manns

Bevor CSS wirken kann, muss der Browser wissen wo es steht. Dafür gibt es drei Wege, und einer davon ist fast immer der richtige.

Weg 1: Externes Stylesheet (der Standard)

Im head der HTML-Datei

<link rel="stylesheet" href="style.css">

Das CSS wohnt in einer eigenen Datei und wird per <link> im head verknüpft. Alle Seiten der Website teilen sich dieselbe Datei: Eine Änderung, überall sichtbar, und der Browser cached die Datei nach dem ersten Laden. So macht es auch dieses Wiki, alle fünfzig Seiten hängen an einer einzigen style.css. Für alles was größer ist als ein Experiment gilt: extern einbinden, fertig.

Weg 2: style-Block im head

<head>
    <style>
        h1 { color: #000082; }
    </style>
</head>

Das CSS steht direkt im Dokument. Praktisch für schnelle Tests, einzelne Sonderseiten oder E-Mails (die können oft nicht anders). Der Nachteil liegt auf der Hand: Es gilt nur für diese eine Datei, bei zehn Seiten pflegst du zehn Kopien.

Weg 3: Inline-Styles am Element

<p style="color: red;">Achtung, wichtig!</p>

Das style-Attribut klebt die Regel direkt ans Element. Damit landet Gestaltung wieder mitten im HTML, genau das Vermischen das CSS eigentlich abschaffen sollte. Dazu kommt: Inline-Styles haben extrem hohes Gewicht und übersteuern fast alles andere, was die Fehlersuche später zur Geduldsprobe macht. Berechtigte Nischen gibt es (per JavaScript berechnete Werte, HTML-Mails), im Alltag ist das Attribut aber die Ausnahme, nicht die Regl.

Was passiert bei Widersprüchen?

Wenn mehrere Quellen dieselbe Eigenschaft setzen, entscheidet die Kaskade, der das C in CSS seinen Namen verdankt. Vereinfacht: Speziellere Selektoren schlagen allgemeinere, bei Gleichstand gewinnt die später gelesene Regel, und Inline-Styles trumpfen fast alles. Wer das im Kopf hat, versteht neunzig Prozent aller "warum greift mein CSS nicht"-Momennte.

Typische Fehler

Den link-Tag in den body setzen statt in den head.
Pfad falsch: href="style.css" sucht neben der HTML-Datei, href="/style.css" im Hauptverzeichnis. Bei Unterseiten macht das den Unterschied.
Alles inline stylen und sich hinterher über unwartbaren Code wundern.

Weiter im Lernpfad: Selektoren · Verwandt: Der head-Bereich