CSS erklärt: Von CSS2 bis zum modernen CSS 2026

Aktualisiert am 9. Oktober 2026

Kurzantwort

CSS (Cascading Style Sheets) ist die Sprache, mit der du das Aussehen von Webseiten festlegst: Farben, Schriften, Abstände, Layout und die Anpassung an verschiedene Bildschirmgrößen. CSS2 erschien 1998 und brachte unter anderem Positionierung, z-index und medienspezifische Stylesheets. Seine korrigierte Fassung CSS 2.1 (2011) bildet bis heute den Kern der Sprache. Seitdem wird CSS in einzelnen Modulen weiterentwickelt, ein „CSS4" als Gesamtversion gibt es deshalb nicht.

Was ist CSS?

HTML beschreibt, was auf einer Seite steht, CSS bestimmt, wie es aussieht. Eine CSS-Regel besteht aus einem Selektor und einer oder mehreren Deklarationen:

h1 {
  color: #1a4d8f;
  font-size: 2rem;
  margin-bottom: 0.5em;
}

Selektor (h1): Welche Elemente sind gemeint?
Eigenschaft (color): Was soll geändert werden?
Wert (#1a4d8f): Wie soll es aussehen?

Die Grundlage in HTML erklärt der Artikel Was ist HTML? Grundlagen, HTML 4.01 und der heutige Standard.

So bindest du CSS ein

Externe Datei (Standard): <link rel="stylesheet" href="style.css"> im <head>. Eine Datei gilt für alle Seiten und wird vom Browser zwischengespeichert.
Im Dokument: Regeln in einem <style>-Block im <head>, praktisch für einzelne Seiten.
Inline: <p style="color: red">. Das solltest du nur in Ausnahmefällen nutzen, weil es schwer zu pflegen ist.

Was bedeutet „Cascading"?

Oft gelten mehrere Regeln für dasselbe Element. Die Kaskade entscheidet, welche gewinnt. Vereinfacht in dieser Reihenfolge:

Herkunft und Wichtigkeit: Regeln mit !important und Autoren-Styles stehen über den Browser-Standards.
Spezifität: Genauere Selektoren gewinnen. Eine ID (#nav) schlägt eine Klasse (.menu), eine Klasse schlägt ein Element (a).
Reihenfolge: Bei gleicher Spezifität gewinnt die Regel, die später im Code steht.

Dazu kommt die Vererbung: Eigenschaften wie color oder font-family gehen automatisch auf Kindelemente über, margin oder border dagegen nicht.

Das Box-Modell

Jedes Element ist für CSS ein Rechteck aus Inhalt, Innenabstand (padding), Rahmen (border) und Außenabstand (margin). Ein Klassiker unter den Stolperfallen: Standardmäßig bezieht sich width nur auf den Inhalt, Padding und Rahmen kommen noch dazu. Viele Entwickler setzen deshalb global:

*, *::before, *::after {
  box-sizing: border-box;
}

Damit gilt die Breite inklusive Padding und Rahmen.

CSS Level 2: was es 1998 neu brachte

Cascading Style Sheets, Level 2 (CSS2) ist eine vom World Wide Web Consortium ( W3C ) entwickelte Stylesheet-Spezifikation, die die Möglichkeiten von CSS erweitert und verbessert. Sie wurde am 12. Mai 1998 zur W3C-Empfehlung, gut anderthalb Jahre nach CSS1 (17. Dezember 1996). CSS1 kannte bereits Schriften, Farben, Abstände sowie float und clear. CSS2 ergänzte vor allem:

Neuerung in CSS2	Beispiel	Heute
Positionierung	`position: absolute / relative / fixed`, `top`, `left`	Grundwerkzeug
Stapelreihenfolge	`z-index`	Grundwerkzeug
Medientypen	`@media print { … }`	erweitert zu Media Queries
Neue Selektoren	Kind `>`, Nachbar `+`, Attribut `[type="text"]`, `:first-child`	Standard
Neue Pseudoklassen	`:hover`, `:focus`	Standard
Generierte Inhalte	`:before`/`:after` mit `content`, Zähler	Standard, heute als `::before`/`::after` geschrieben
Tabellen-Layout per CSS	`display: table`	durch Grid/Flexbox weitgehend ersetzt
Seitengestaltung für Druck	`@page`	für Druck-Stylesheets
Sprachausgabe („aural")	`voice-family`, `volume`	in CSS 2.1 entfernt, nie verbreitet

In der Praxis setzten Browser CSS2 lange nur lückenhaft um. Deshalb erarbeitete das W3C CSS 2.1: eine bereinigte Fassung, die nur noch das beschreibt, was sich tatsächlich einheitlich umsetzen ließ. Sie wurde am 7. Juni 2011 Empfehlung und löste CSS2 offiziell ab. Einige Features wie text-shadow flogen dabei zunächst heraus und kamen später über eigene Module zurück.

Warum es kein CSS3 und kein CSS4 als Version gibt

Nach CSS 2.1 wurde CSS in Module aufgeteilt, die unabhängig voneinander Level erreichen: Selectors Level 4, Color Level 4, Media Queries Level 5 und so weiter. „CSS3" war ein Sammelbegriff für die ersten Module nach CSS 2.1. Ein „CSS4" als Gesamtpaket gibt es nicht. Der Stand der Sprache wird stattdessen regelmäßig in „Snapshots" zusammengefasst. Mehr zur Rolle des W3C findest du unter Was sind die W3C-Webstandards? Überblick 2026.

Was modernes CSS kann

Vieles, wofür früher Tricks oder JavaScript nötig waren, kann CSS heute selbst. Diese Funktionen laufen in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari:

Funktion	Wofür?
Flexbox	Elemente in einer Reihe oder Spalte verteilen und ausrichten
Grid	zweidimensionale Seitenlayouts mit Zeilen und Spalten
Media Queries	Layout abhängig von Bildschirmbreite, Dark Mode (`prefers-color-scheme`) oder reduzierter Bewegung
Custom Properties	Variablen wie `--akzent: #1a4d8f;`
Container Queries	Komponenten reagieren auf die Breite ihres Containers statt auf das Fenster
`:has()`	Elternelemente anhand ihres Inhalts auswählen, allgemein verfügbar seit Dezember 2023
Nesting	Regeln verschachteln wie in Sass, ohne Präprozessor
`clamp()`	fließende Größen mit Minimum und Maximum

Ein kompaktes Beispiel, das mehrere davon kombiniert:

:root {
  --akzent: #1a4d8f;
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.karte {
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #ddd;

  &:hover {
    border-color: var(--akzent);
  }

  &:has(img) {
    padding-top: 0;
  }
}

Die Karten ordnen sich automatisch in so viele Spalten, wie auf den Bildschirm passen, ganz ohne einzelne Media Query.

Tipps für sauberes CSS

Mobile first: Schreib die Grundregeln für kleine Bildschirme und ergänze größere Layouts per @media (min-width: …).
Klassen statt IDs für die Gestaltung. Das hält die Spezifität niedrig und die Regeln überschreibbar.
!important vermeiden. Es ist meist ein Zeichen für ein Spezifitätsproblem.
Performance im Blick behalten: Große, blockierende Stylesheets und nachladende Webfonts können Layoutverschiebungen verursachen. Welche Messwerte Google dabei bewertet, erklärt der Artikel zu den Core Web Vitals 2026.

FAQ

Ist CSS2 heute noch relevant?

Als eigenständige Version nicht mehr, aber seine Inhalte schon: Positionierung, Selektoren, Box-Modell und Kaskade stammen im Kern aus CSS2 bzw. CSS 2.1 und gelten weiterhin.

Was ist der Unterschied zwischen CSS2 und CSS 2.1?

CSS 2.1 ist die korrigierte und bereinigte Fassung von CSS2. Sie hat Fehler behoben, kaum umgesetzte Features gestrichen und ist seit 2011 die offizielle Referenz für Level 2.

Brauche ich noch Sass oder Less?

Für viele Projekte nicht mehr, denn Variablen und Verschachtelung kann CSS inzwischen selbst. Präprozessoren bieten aber weiterhin Extras wie Mixins und das Zusammenführen vieler Dateien.