Was ist CSS?

CSS steht für Cascading Style Sheets. Während HTML festlegt, was auf einer Seite steht, bestimmt CSS, wie es aussieht. Stell dir HTML als nacktes Skelett vor — Überschriften, Absätze, Bilder, alles untereinander gestapelt, schwarz auf weiß, ohne Eigenleben. CSS ist die Tapete, die Schriftart, die Mintgrüne Akzentfarbe, der Schatten unter dem Button, der Abstand zwischen zwei Spalten.

CSS wird in eigenen .css-Dateien geschrieben und im der HTML-Seite eingebunden. Ein Browser lädt die HTML-Datei, sieht den Verweis auf die CSS-Datei, lädt sie nach und kombiniert beide zur fertig gerenderten Seite. Du kannst eine CSS-Datei für dutzende HTML-Seiten benutzen — änderst du die Farbe an einer Stelle, ändert sie sich überall. Genau das macht CSS so mächtig.

Beispiel: Eine Anwaltskanzlei will ihre komplette Website von Blau auf Bordeaux-Rot umstellen. Mit CSS ist das eine Zeile Code. Ohne CSS müsste man jede einzelne HTML-Datei anfassen und in jedem Tag die Farbe per Hand ändern.

Wie funktioniert CSS?

CSS besteht aus Regeln. Eine Regel hat zwei Teile: einen Selektor, der sagt "auf welche Elemente das hier zutrifft", und einen Deklarationsblock, der sagt "das hier soll passieren":

h1 {
  color: #1a1a1a;
  font-size: 48px;
  font-family: "Inter", sans-serif;
  margin-bottom: 24px;
}

Diese Regel sagt: "Alle

-Überschriften sollen fast schwarz, 48 Pixel groß, in der Schrift Inter und mit 24 Pixeln Abstand nach unten dargestellt werden." Die Eigenschaft `color` nimmt einen Hex-Code, `font-size` eine Größenangabe, und so weiter.

Selektoren können verschiedene Dinge ansprechen:

Tag-Selektor: `h1` trifft auf alle h1-Elemente
Klassen-Selektor: `.button` trifft auf alle Elemente mit `class="button"`
ID-Selektor: `#header` trifft auf das Element mit `id="header"`
Verschachtelt: `nav a` trifft auf alle Links innerhalb eines

Das "Cascading" im Namen heißt: Wenn mehrere Regeln auf dasselbe Element zutreffen, kaskadieren sie. Spezifischere Regeln gewinnen, später im Code definierte Regeln überschreiben frühere. Dieses Prinzip heißt Specificity (Spezifität) und folgt einer klaren Rangfolge: Inline-Styles schlagen ID-Selektoren, ID-Selektoren schlagen Klassen, Klassen schlagen Tag-Selektoren. Wer diese Reihenfolge kennt, versteht, warum eine Regel mal greift und mal nicht.

Das Box-Modell

Jedes HTML-Element ist in CSS eine rechteckige Box mit vier Schichten: content (der Inhalt), padding (Innenabstand), border (Rahmen) und margin (Außenabstand). Zusammen ergeben sie die Größe, die das Element im Layout belegt.

Standardmäßig rechnet der Browser width nur auf den Content — Padding und Border kommen on top. Ein Element mit width: 300px und padding: 20px ist in Wahrheit 340 Pixel breit. Deshalb setzen fast alle Projekte global box-sizing: border-box. Damit rechnet der Browser Padding und Border in die angegebene Breite ein — width: 300px heißt dann wirklich 300 Pixel sichtbare Breite. Ein Einzeiler, der Stunden an Rechen-Kopfschmerzen spart.

Flexbox — Layouts in einer Dimension

Flexbox ordnet Elemente in einer Reihe oder Spalte an und verteilt sie flexibel. Du aktivierst es mit display: flex auf dem Eltern-Element — alle Kinder werden zu Boxen, die sich automatisch an den verfügbaren Platz anpassen.

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

Die Navigation wird horizontal ausgerichtet, der erste und letzte Eintrag kleben an den Rändern (justify-content: space-between), alle Elemente sind vertikal mittig (align-items: center), und zwischen ihnen liegen 24 Pixel Abstand (gap). Ohne Flexbox musste man dafür früher mit float kämpfen — mit Flexbox sind es fünf Zeilen.

Grid — Layouts in zwei Dimensionen

CSS Grid ist Flexbox für zwei Achsen. Du definierst ganze Raster aus Reihen und Spalten — ideal für Seitenlayouts, Produktgalerien oder Dashboards.

.produkte {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

1fr steht für "eine Fraktion des verfügbaren Platzes". Drei Spalten zu je 1fr teilen den Platz in drei gleiche Teile. Kombiniert mit einer Media Query wird daraus bei kleinen Displays eine einzige Spalte — das Herzstück moderner Responsive Design-Layouts.

CSS-Variablen und Pseudo-Klassen

Statt Farben und Abstände an hundert Stellen zu wiederholen, definierst du sie einmal als CSS-Variable (offiziell: Custom Property) und referenzierst sie mit var(). Ändert sich die Markenfarbe, änderst du eine Zeile — der Kern jedes modernen Design-Systems.

:root {
  --farbe-primary: #00C896;
  --radius-card: 12px;
}
.button {
  background-color: var(--farbe-primary);
  border-radius: var(--radius-card);
}

Pseudo-Klassen sind spezielle Zustände, die du mit einem Doppelpunkt ansprichst: :hover für Mouse-Over, :focus für fokussierte Elemente (wichtig für Tastaturnutzer), :active für den Klick-Moment, :nth-child(2n) für jedes zweite Kind-Element. Zusammen mit Transitions werden Zustandswechsel weich animiert: transition: all 0.2s ease sorgt dafür, dass jede Änderung sanft über 200 Millisekunden läuft statt schlagartig — der Unterschied zwischen "billige Seite" und "fühlt sich an wie ein Premium-Produkt".

Warum ist CSS für deine Website wichtig?

Eine Website ohne CSS sieht aus wie ein Word-Dokument von 1998. Schwarze Times-New-Roman-Schrift auf weißem Hintergrund, blaue unterstrichene Links, alles linksbündig. Niemand bleibt auf so einer Seite. CSS ist der Unterschied zwischen "wirkt wie eine echte Marke" und "wirkt wie aus dem Schulpraktikum".

CSS ist außerdem das Werkzeug für Responsive Design. Mit Media Queries sagst du dem Browser: "Wenn der Bildschirm schmaler als 768 Pixel ist, zeig die Navigation als Burger-Menü statt als Leiste." Ohne CSS gäbe es keine Mobile-Versionen, keine flexiblen Layouts, keine Animation beim Hover. Und weil der Browser CSS aggressiv zwischenspeichert, spielt auch Cache eine Rolle — eine geänderte Regel wird erst sichtbar, wenn der alte Stylesheet aus dem Browser-Cache fliegt.

Häufige Fehler im Umgang mit CSS

Inline-Styles statt CSS-Datei. Wer style="color: red;" direkt in jedes HTML-Tag schreibt, bekommt nach drei Wochen ein nicht mehr wartbares Chaos. CSS gehört in eine zentrale Datei.

Zu viele !important-Deklarationen. !important ist die Brechstange der CSS-Welt. Wer sie überall einsetzt, weil der Code anders nicht funktioniert, hat ein Strukturproblem — keins, das mit !important lösbar wäre.

Pixel statt relative Einheiten. Wenn du Schriftgrößen in px festschreibst, kannst du sie auf dem Handy nicht sauber skalieren. Besser sind rem, em oder clamp() für flexibles Größenverhalten.

Riesige Stylesheets ohne Minification. Unkomprimierte CSS-Dateien mit Kommentaren und Leerzeichen kosten unnötig Ladezeit und schlagen auf die Performance — gerade in Kombination mit Core Web Vitals ein vermeidbarer Fehler.

Spezifitäts-Kämpfe. Eine Regel überschreibt die andere, niemand weiß warum. Meistens, weil ID-Selektoren, Klassen und Inline-Styles wild kombiniert werden. Saubere Klassen-Konvention spart später Stunden Debugging.

CSS