Was ist CSS einbinden?

Kurz-Fakten

• Externe Einbindung: link mit rel="stylesheet" und href, im head-Bereich
• Ein style-Block im Dokument gilt nur für dieses Dokument und wird nicht seitenübergreifend zwischengespeichert
• Das style-Attribut hat höhere Spezifität als jede Regel aus einer Datei – nur !important sticht es aus
• Stylesheets blockieren die Darstellung, bis sie geladen sind; deshalb gehören sie in den Kopf und sollten klein bleiben
• Über das media-Attribut lässt sich ein Stylesheet auf Druckausgabe oder Bildschirmbreiten einschränken

Einordnung für die Praxis

Die Reihenfolge im Kopfbereich hat messbare Folgen. Ein Stylesheet blockiert das Zeichnen der Seite – das ist gewollt, sonst blitzt unformatierter Text auf. Zwei zusätzliche Dateien von fremden Servern verlängern diese Blockade um deren Antwortzeit, auf die man keinen Einfluss hat.

Beim style-Attribut lohnt eine Regel: Was ein Mensch schreibt, gehört in die Datei; was ein Programm berechnet, darf ins Attribut. Alles andere endet in einer Gestaltung, die sich nur noch mit !important überschreiben lässt.

Verwandte Begriffe

• style-Attribut Das style-Attribut enthält CSS-Deklarationen, die nur für das eine Element gelten, an…
• link-Element Das link-Element stellt im Kopfbereich eine Beziehung zwischen dem Dokument und einer…
• JavaScript einbinden JavaScript wird über das script-Element eingebunden – entweder mit einem src-Attribut…
• Responsive HTML Responsives Verhalten entsteht überwiegend in CSS – HTML steuert zwei Dinge bei: die…