Was ist CSS?

CSS steht für Cascading Style Sheets, auf Deutsch: Kaskadierende Stilvorlagen. Klingt kompliziert, lässt sich aber gut aufschlüsseln:

• Cascading (Kaskadierend) bedeutet, dass mehrere Stilregeln auf dasselbe Element wirken können. Der Browser entscheidet anhand fester Regeln, welche Regel gewinnt. Mehr dazu lernst du später beim Thema Spezifität.
• Style (Stil): CSS beschreibt das Aussehen: Farben, Abstände, Schriftgrößen, Layouts und vieles mehr.
• Sheets (Vorlagen): CSS-Regeln werden in Stylesheets geschrieben, also in eigenen Dateien oder eingebetteten Bereichen.

Genau wie HTML ist CSS eine deklarative Sprache. Du beschreibst, wie etwas aussehen soll, nicht wie es berechnet wird. Kein if, kein for, keine Variablen im klassischen Sinne (Custom Properties kamen erst später hinzu).

Im Zusammenspiel der drei Kerntechnologien des Webs hat CSS eine klare Rolle:

• HTML definiert die Struktur und den Inhalt (Was steht auf der Seite?)
• CSS gestaltet das Aussehen (Wie sieht es aus?)
• JavaScript fügt Verhalten hinzu (Was passiert bei Interaktion?)

Um zu verstehen, was CSS bewirkt, schau dir denselben HTML-Code einmal ohne und einmal mit CSS an.

Ohne CSS zeigt der Browser nur die Standard-Darstellung: schwarzer Text auf weißem Hintergrund, Times New Roman, keine Abstände, kein Layout.

<h2>Willkommen</h2>
<p>Das ist eine Webseite ohne CSS.</p>
<p>Alles sieht gleich aus, langweilig und unformatiert.</p>

Mit ein paar Zeilen CSS ändert sich das Bild komplett:

body {
  font-family: system-ui, sans-serif;
  padding: 16px;
  background: #f8f9fa;
}

h2 {
  color: #1a56db;
  margin-bottom: 8px;
}

p {
  color: #374151;
  line-height: 1.6;
}

<h2>Willkommen</h2>
<p>Das ist eine Webseite mit CSS.</p>
<p>Farben, Schriftart und Abstände machen den Unterschied.</p>

Derselbe HTML-Code, ein völlig anderes Ergebnis. Das ist die Stärke von CSS: Du trennst Inhalt von Gestaltung.

Jede CSS-Regel besteht aus zwei Teilen: einem Selektor und einem Deklarationsblock:

Selektor {
  Eigenschaft: Wert;
  Eigenschaft: Wert;
}

Ein konkretes Beispiel:

p {
  color: #dc2626;
  font-size: 20px;
}

Hier ist, was die einzelnen Teile bedeuten:

• Selektor (p): bestimmt, welche HTML-Elemente gestaltet werden. Hier: alle <p>-Elemente.
• Deklarationsblock ({ ... }): enthält eine oder mehrere Deklarationen in geschweiften Klammern.
• Deklaration (color: #dc2626;): besteht aus einer Eigenschaft und einem Wert, getrennt durch einen Doppelpunkt und abgeschlossen mit einem Semikolon.
• Eigenschaft (color): was du ändern willst (Farbe, Größe, Abstand …).
• Wert (#dc2626): auf was du es ändern willst.

In der Praxis schreibst du nicht nur eine Regel, sondern viele. Jede Regel zielt auf bestimmte Elemente ab:

h2 {
  color: #7c3aed;
  border-bottom: 2px solid #7c3aed;
  padding-bottom: 4px;
}

p {
  color: #374151;
  line-height: 1.6;
}

strong {
  color: #dc2626;
}

<h2>CSS ist mächtig</h2>
<p>Mit wenigen Regeln veränderst du das
<strong>komplette Erscheinungsbild</strong> einer Seite.</p>

CSS wurde 1996 vom W3C (World Wide Web Consortium) veröffentlicht, um das Aussehen von Webseiten vom HTML-Code zu trennen. Vorher wurden Farben und Schriftgrößen direkt in HTML-Tags geschrieben, was schnell unübersichtlich wurde.

Seit CSS3 gibt es keine einzelne große Versionsnummer mehr. Stattdessen werden Features in eigenständigen Modulen entwickelt und veröffentlicht. Flexbox, Grid, Custom Properties: all das sind CSS-Module, die unabhängig voneinander weiterentwickelt werden. Wenn jemand “CSS4” sagt, meint er meistens die neuesten Modul-Versionen.

CSS kann:

• Farben, Schriftarten und Textformatierung festlegen
• Abstände und Rahmen definieren (Box-Modell)
• Layouts erstellen (Flexbox, Grid)
• Animationen und Übergänge gestalten
• Responsive Design für verschiedene Bildschirmgrößen umsetzen
• Elemente ein- und ausblenden

CSS kann nicht:

• HTML-Struktur verändern oder neue Elemente erzeugen
• Auf Benutzereingaben reagieren (Formulare auswerten, Daten senden)
• Berechnungen durchführen (außer einfache mit calc())
• Daten aus einer Datenbank laden

Im nächsten Artikel lernst du die drei Wege, wie du CSS in HTML einbinden kannst, und welche Methode sich wann eignet.