Was ist CSS?

MDN definiert CSS als Stilsprache, mit der die Darstellung von HTML- oder XML-Dokumenten beschrieben wird. Sagt das HTML, was etwas ist, also Überschrift, Absatz oder Link, sagt das CSS, wie es aussieht. Diese Trennung erlaubt es, das Design einer ganzen Website zu ändern, ohne ihren Inhalt anzufassen.

Der Name erklärt den Mechanismus. „Style Sheets“, weil die Regeln in Dateien oder Stilblöcken gebündelt werden. „Cascading“, weil mehrere Regeln auf dasselbe Element zutreffen können und der Browser nach Herkunft, Spezifität und Reihenfolge entscheidet, welche gilt. Eine allgemeine Regel kann alle Absätze grau färben, eine genauere die im Seitenkopf weiß.

CSS erscheint nicht mehr als einzelne Version. Es wird in unabhängigen Modulen entwickelt, etwa für Raster, Schriften oder Animationen, die sich jeweils in eigenem Tempo weiterentwickeln. Von CSS4 als abgeschlossener Version zu sprechen, ergibt deshalb keinen Sinn.

Eine CSS-Regel besteht aus zwei Teilen: einem Selektor, der angibt, für welche Elemente sie gilt, und einer Liste von Deklarationen, die sagen, welche Eigenschaften sich mit welchem Wert ändern. Ein Selektor für Überschriften zweiter Ebene mit der Deklaration Farbe Blau färbt alle diese Überschriften blau.

CSS kann auf drei Wegen zum Browser gelangen: als eigene Datei, auf die das HTML verweist, als Stilblock im HTML selbst oder als Attribut an einem einzelnen Element. Für die Ladezeit macht das einen Unterschied. Lighthouse, das Prüfwerkzeug von Chrome, markiert verlinkte Stylesheets, die der Browser vor dem Zeichnen der Seite laden muss, als renderblockierende Ressourcen und empfiehlt, das kritische CSS einzubetten, den Rest später zu laden und Ungenutztes zu entfernen.

Media Queries sorgen dafür, dass dasselbe HTML je nach Bildschirmbreite, Ausrichtung oder bevorzugtem Dunkelmodus anders aussieht. Dadurch braucht eine responsive Website keine eigene Mobilversion: Das CSS ordnet den Inhalt neu.

Für SEO zählt CSS auf zwei Wegen. Der erste ist die Ladezeit: Ein großes oder renderblockierendes Stylesheet verzögert den Moment, in dem der Inhalt sichtbar wird, und kann Kennzahlen wie den LCP verschlechtern, einen der Core Web Vitals. Schlecht geplantes CSS verursacht außerdem Layout-Sprünge, wenn die Stile spät ankommen.

Der zweite ist das Verständnis. Google schreibt in seinem Leitfaden zur robots.txt, dass unwichtige Stildateien gesperrt werden können, aber nicht, wenn ihr Fehlen es dem Crawler erschwert, die Seite zu verstehen. Der Googlebot rendert Seiten und braucht das CSS, um zum Beispiel zu erkennen, welcher Inhalt sichtbar ist und wie sich die Seite auf dem Smartphone anpasst.

Im Quelltext von zds.es ist ein Stilblock zu sehen, der direkt im HTML steht: Im Eintrag zum CMS in diesem Glossar, gemessen am 8. Oktober 2026, belegt er 124.828 der 186.694 Byte der Seite, zwei Drittel. Dass das so ist, folgt aus unserer eigenen Einrichtung, die den Generator Astro anweist, das CSS immer einzubetten, statt es als eigene Datei zu verlinken. Der Vorteil: Für das eigene CSS muss der Browser vor dem Zeichnen kein externes Stylesheet laden; blockierend sind nur noch zwei kleine Dateien der Einwilligungsbibliothek mit rund 20 und 5 KB. Der Preis: Diese Bytes reisen mit jeder Seite mit und lassen sich nicht von einem Besuch zum nächsten wiederverwenden, wie es bei einer zwischengespeicherten Datei der Fall wäre. Die Icon-Schrift dagegen kommt von außen, mit einer Technik, die das erste Zeichnen nicht blockiert.

• Das kritische CSS einbetten, also das, was zum Zeichnen des sichtbaren Bereichs nötig ist, und den Rest später laden.
• Ungenutzte Regeln entfernen, vor allem, wenn sie aus Vorlagen oder kompletten Frameworks stammen.
• Stildateien, die Google zum Verständnis der Seite braucht, nicht per robots.txt sperren.
• Per CSS Platz für Bilder, Anzeigen und Banner reservieren, um Layout-Sprünge zu vermeiden.
• Das Design mit Media Queries an Mobilgeräte anpassen, statt eine getrennte Mobilversion zu pflegen.
• Die Wirkung jeder Stiländerung mit Felddaten messen, nicht nur mit einem Labortest.

• Per CSS Text oder Links verstecken, die nur für Suchmaschinen gedacht sind, was Google als Spam wertet.
• Mehrere vollständige Framework-Stylesheets laden, um einen winzigen Teil davon zu nutzen.
• Den Stilordner in der robots.txt sperren und Google so die Möglichkeit nehmen, die Seite wie ein Mensch zu sehen.
• Webfonts ohne reservierten Platz und ohne Ausweichschrift laden, sodass beim Wechsel sichtbare Sprünge entstehen.
• Die Ladezeit nur am Desktop beurteilen, obwohl CSS auf Smartphones mit langsamer Verbindung stärker ins Gewicht fällt.