Was sind Cascading Style Sheets?
Cascading Style Sheets, kurz CSS, sind die Gestaltungssprache des Webs. HTML legt fest, dass etwas eine Überschrift, ein Absatz oder ein Button ist. CSS bestimmt, wie das aussieht: Schrift, Farbe, Größe, Abstand, Position.
Stell dir HTML als Rohbau vor und CSS als Innenausbau. Derselbe Rohbau kann je nach CSS wie eine Arztpraxis oder wie eine Bar aussehen. Und das Schöne: Änderst du eine Zeile im Stylesheet, ändern sich alle Seiten auf einmal.
Erfunden hat das Konzept der Norweger Håkon Wium Lie, erster Entwurf im Oktober 1994. CSS1 wurde 1996 Standard beim W3C, dem Gremium, das die Regeln fürs Web festlegt. Ein „CSS4“ wird es übrigens nie geben: Seit CSS 2.1 entwickelt sich CSS in einzelnen Modulen weiter.
Was heißt „Kaskade“?
Oft gelten mehrere Regeln für dasselbe Element. Das Theme sagt „Überschriften blau“, ein Plugin sagt „Überschriften schwarz“. Die Kaskade entscheidet, wer gewinnt. Vereinfacht gilt:
- Genauer schlägt allgemeiner: Eine Regel für „Überschrift im Kontaktbereich“ gewinnt gegen „alle Überschriften“. Das nennt man Spezifität.
- Später schlägt früher: Bei gleicher Genauigkeit gewinnt die Regel, die zuletzt kommt.
- !important schlägt fast alles: der Notnagel, der später viel Ärger macht.
Dazu kommen Media Queries: Regeln, die nur ab einer bestimmten Bildschirmbreite gelten. So legt CSS fest, dass aus drei Spalten am Desktop eine Spalte am Handy wird. Das ist der Kern von Responsive Design.
Was hat CSS mit der Ladezeit zu tun?
Der Browser zeichnet nichts, bevor er die Stylesheets geladen hat. CSS ist also render-blockierend. Je mehr Dateien und je größer sie sind, desto länger starrt der Besucher auf eine weiße Seite.
Median je Seite
Wert
CSS-Menge (2025)
rund 80 KB
CSS-Dateien (2025)
8
davon ungenutzt (2024)
52 KB
Die Werte stammen aus dem Web Almanac von HTTP Archive, der Millionen Websites misst. Die Menge stammt aus 2025, das ungenutzte CSS aus der Auswertung 2024 (Handy-Seiten). Bei den größten 10 % sind es über 200 KB CSS, die der Browser lädt und nie braucht.
Case A · Pagebuilder
Elementor lädt CSS nach Bedarf
206 KB
CSS vorher
54 KB
CSS mit Pro 3.3
152 KB weniger je Seite
Herstellerangabe von 2021: Elementor lädt seitdem nur das CSS der Widgets, die wirklich auf der Seite stehen.
Case B · Testseite
Unwichtiges CSS später laden
55,9 %
ungenutzte Bytes vorher
1,0 → 0,8 s
First Contentful Paint
20 % schneller sichtbar
Übungsseite von Google auf web.dev, keine echte Website — zeigt aber gut, was das Verschieben von CSS bringt.
Häufige Fehler
Fehler 1 · Überall !important
Die Regel greift nicht, also kommt !important dran. Dann greift die nächste nicht — wieder !important. MDN nennt das schlechte Praxis. Besser: verstehen, welche Regel gewinnt, und die eigene genauer formulieren.
Fehler 2 · Plugins, die überall CSS laden
Das Slider-Plugin lädt sein Stylesheet auf jeder Seite, auch wo kein Slider steht. Lighthouse rät bei WordPress ausdrücklich, Plugins mit ungenutztem CSS zu reduzieren oder auszutauschen.
Fehler 3 · Den Fokusrahmen wegstylen
„outline: none“, weil der blaue Rahmen hässlich aussieht. Wer mit Tastatur surft, sieht dann nicht mehr, wo er ist. Die WCAG verlangen einen sichtbaren Fokus — gestalte ihn, statt ihn zu löschen.
Fehler 4 · Zu wenig Kontrast
Hellgrau auf Weiß sieht edel aus und ist schwer zu lesen. Laut WebAIM hatten 2026 83,9 % der eine Million meistbesuchten Startseiten Text mit zu wenig Kontrast. Die WCAG verlangen für normalen Text mindestens 4,5 zu 1.
Was heißt das für dich?
Du musst kein CSS schreiben können, um eine Website zu betreiben. Pagebuilder wie Elementor schreiben es für dich. Aber du solltest wissen, was passiert, wenn PageSpeed Insights meckert:
- „Render-blockierende Anfragen“: Zu viele oder zu große Stylesheets im Kopf der Seite. Abhilfe: Critical CSS — das CSS für den ersten Bildschirm direkt in die Seite, den Rest später laden.
- „Ungenutztes CSS reduzieren“: Prüfe in den Chrome DevTools unter „Coverage“, welche Dateien kaum genutzt werden. Tools wie WP Rocket oder Perfmatters können ungenutztes CSS entfernen.
- „CSS reduzieren“ (minifizieren): Leerzeichen und Kommentare raus — das erledigt jedes Caching-Plugin.
Häufige Fragen
Was ist der Unterschied zwischen HTML und CSS?
HTML beschreibt den Inhalt und seine Struktur: Überschrift, Absatz, Bild, Link. CSS beschreibt die Darstellung: Farbe, Schrift, Abstand, Layout. JavaScript kommt als drittes dazu und sorgt für Verhalten und Interaktion.
Brauche ich CSS-Kenntnisse für WordPress oder Elementor?
Für den Alltag nicht. Die Gestaltung läuft über die Oberfläche des Pagebuilders. Grundwissen hilft aber, wenn eine Regel nicht greift oder PageSpeed über CSS meckert. Ein paar Zeilen eigenes CSS lösen oft, was im Editor nicht geht.
Warum meckert PageSpeed über ungenutztes CSS?
Weil der Browser Stylesheets laden muss, bevor er die Seite zeigt. Lädt die Seite viel CSS, das sie gar nicht braucht, wartet der Besucher umsonst. Lighthouse listet jede Datei, bei der sich mindestens 2 KiB sparen ließen.
Warum greift meine CSS-Regel nicht?
Meist gewinnt eine andere Regel, die genauer formuliert ist oder später geladen wird. Im Browser zeigt dir die Entwickleransicht per Rechtsklick und „Untersuchen“, welche Regel durchgestrichen ist und welche gewinnt.
Ist CSS für Barrierefreiheit wichtig?
Sehr. Kontraste, Schriftgrößen, sichtbarer Tastaturfokus und Abstände regelt CSS. Viele der häufigsten Fehler bei der Barrierefreiheit, allen voran zu wenig Kontrast, entstehen im Stylesheet.
Quellen
- MDN Web Docs: CSS
- W3C: Geschichte von CSS
- HTTP Archive: Web Almanac 2025, Page Weight
- HTTP Archive: Web Almanac 2024, Sustainability
- Chrome for Developers: Ungenutztes CSS reduzieren
- Chrome for Developers: Render-blockierende Ressourcen
- web.dev: Nicht kritisches CSS verzögert laden
- WebAIM: The WebAIM Million
- W3C: WCAG 2.2, Kontrast (Minimum)
