CSS-Grundlagen: Selektoren, Eigenschaften, Kaskade

HTML strukturiert den Inhalt einer Webseite – aber HTML alleine sieht aus wie ein Word-Dokument von 1995. CSS (Cascading Style Sheets) ist die Sprache mit der wir das Aussehen kontrollieren: Farben, Schriften, Größen, Abstände, Layouts, Animationen. Während HTML sagt „das ist eine Überschrift", sagt CSS „und sie soll blau, fett und 32px groß sein".

Das Schöne: HTML und CSS sind strikt getrennt. Das ist eine bewusste Design-Entscheidung. Du kannst die Optik einer ganzen Website ändern indem du nur das CSS austauschst – ohne eine einzige HTML-Datei anzufassen. Die Webseite csszengarden.com demonstriert das eindrucksvoll: dieselbe HTML-Datei, hunderte komplett verschiedene Designs.

1) Anatomie einer CSS-Regel

Eine CSS-Regel besteht aus drei Teilen: dem Selektor (was), den Eigenschaften (wie) und den Werten (wie genau). Klicke die Teile:

Aufbau einer CSS-Regel

h1 {
color: blue;
font-size: 32px;
}

← Klick einen Teil.

Mehrere Eigenschaften werden mit Semikolon getrennt. Das Semikolon hinter der letzten ist technisch optional – aber Konvention. Vergisst du es vor einer neuen Property, kann das ganze Regel-Block ungültig werden. Geschweifte Klammern { } umschließen den Regel-Body. Mehrere Selektoren mit Komma trennen: h1, h2, h3 { color: blue; }.

2) Drei Wege CSS einzubinden

CSS kann an drei Stellen stehen. Die Wahl hat Folgen für Wartbarkeit und Performance:

Wo schreibst du dein CSS hin?

✓ Externe CSS-Datei (empfohlen!)

Im <head> der HTML-Datei. CSS in separater .css-Datei. Vorteile: trennt Struktur/Design, gemeinsam für mehrere Seiten nutzbar, vom Browser gecacht.

~ Style im <head> (für Single-Page)

CSS direkt im <style>-Tag der HTML-Datei. Praktisch für kleine Demos oder Critical-CSS. Nicht teilbar zwischen Seiten.

✗ Inline-Style (selten gut)

CSS direkt am Element. Sehr hohe Spezifität – schwer zu überschreiben. Nutze es nur wenn JS dynamisch Stile setzt oder für Ad-hoc-Tests.

In echten Projekten fast immer Variante 1 (externe Datei). Größere Projekte nutzen Build-Tools (Webpack, Vite) und CSS-Präprozessoren (Sass, PostCSS) oder Frameworks (Tailwind, Bootstrap). Aber unter der Haube ist immer Standard-CSS am Werk.

3) Selektoren – wie wähle ich Elemente aus?

Selektoren sind das Herzstück von CSS. Hier sind alle wichtigen Typen mit Live-Vorschau – grün markiert ist jeweils das Element das der Selektor trifft:

Selektor-Playground

.klasse

#id

.a.b

a b

a>b

[attr]

:hover

:nth

Selektoren lassen sich kombinieren: article.featured h2.title heißt: alle h2 mit class="title" innerhalb von article mit class="featured". Je präziser, desto höher die Spezifität (kommt gleich). Faustregel: lieber Klassen-Selektoren als Element-Selektoren – flexibler beim Umbau.

4) Spezifität – wer gewinnt wenn Regeln kollidieren?

Was passiert wenn zwei Regeln dieselbe Eigenschaft setzen? Bei color: red und color: blue kann der Browser nur eine umsetzen. Hier kommt die Spezifität ins Spiel – ein Punktesystem das berechnet welcher Selektor „präziser" ist und damit gewinnt:

Spezifitäts-Punkte

001

0-0-1

p.klasse

011

0-1-1

.feature .titel

020

0-2-0

#hauptbereich p

101

1-0-1

style="..."

!10

1-0-0-0

0Element/Pseudo-Element 1Klasse/Attribut/Pseudo-Klasse 1ID !Inline-Style

Verglichen wird von links nach rechts: 1-0-0 schlägt 0-99-99! Eine ID alleine ist immer mächtiger als egal-wie-viele Klassen. Das wichtigste: vermeide hohe Spezifität. Wenn du anfängst #x .y div span zu schreiben weil sonst nichts zieht, ist meist was am Konzept faul. Faustregel: Klassen sind dein Hauptwerkzeug, IDs sparsam, !important nur als letzter Ausweg.

5) Die Kaskade – warum CSS „Cascading" heißt

Das C in CSS steht für „Cascading". Damit ist gemeint: wenn mehrere Regeln auf ein Element passen, gewinnt nicht zufällig irgendwas – es gibt klare Regeln in welcher Reihenfolge die Stile angewendet werden. Vereinfacht von wichtig nach unwichtig:

Die Kaskade – Reihenfolge beim Konflikt

1. Browser-Defaultsverliert immer

2. User-Stylesheet (Browser-Settings)selten genutzt

3. Externe CSS-Datei (link)je nach Spezifität

4. <style> im <head>je nach Spezifität

5. Inline style="..."hohe Spezifität

6. !important⚠ schlägt fast alles

Drei Faktoren bestimmen welche Regel gewinnt: 1) Quelle (Browser → externe Datei → inline), 2) Spezifität (wie oben), 3) Reihenfolge (bei gleicher Spezifität gewinnt die später deklarierte). !important ist die Atombombe – nimmt jeder Regel die Spezifitäts-Logik. Bitte nicht standardmäßig! Wenn du !important brauchst, ist meistens das Architektur-Konzept fehlerhaft.

6) Vererbung – manche Eigenschaften „fließen runter"

Manche CSS-Eigenschaften werden automatisch an Kind-Elemente weitergegeben. Wenn du color: blue auf <body> setzt, sind alle Texte darin standardmäßig blau – außer du überschreibst es. Das heißt Vererbung.

Vererbt werden meist: Text-Eigenschaften (color, font-family, font-size, line-height, text-align). NICHT vererbt: Box-Eigenschaften (margin, padding, border, width, background) – sonst würde alles wild aussehen. Mit inherit kannst du Vererbung erzwingen, mit initial zurücksetzen.

7) CSS-Werte – Farben, Längen, Funktionen

Werte können viele Formate haben. Hier die wichtigsten Kategorien:

Farben: red, #ff5500, rgb(255, 85, 0), rgba(255, 85, 0, 0.5) mit Alpha, hsl(20, 100%, 50%), modernes oklch().
Längen: absolut: px, pt. Relativ: em (zur Eltern-Schrift), rem (zur Root-Schrift), %, vw/vh (Viewport).
Zeit: s oder ms für Animationen/Transitions.
Funktionen: calc(100% - 20px), min(50vw, 600px), max(), clamp(16px, 2vw, 24px).

Modern wird oft rem empfohlen statt px: rem skaliert mit der Browser-Schrifteinstellung des Users – wichtig für Barrierefreiheit. Sehbehinderte Nutzer stellen oft die Standardschrift auf 150% – mit rem reagiert dein Design darauf.

8) Live-Editor: HTML + CSS spielen

Probier es selbst aus – ändere CSS und sieh sofort was passiert:

Spielwiese

HTML + CSS

Live-Vorschau

Experimentiere mit verschiedenen Eigenschaften und Selektoren. Was passiert wenn du :hover zu :focus änderst? Wenn du orange durch #3366ff ersetzt? Wenn du eine neue Klasse einführst? Spielerisch lernen ist bei CSS sehr effektiv. Wenn du den Live-Reload eines Editors wie VS Code mit Live-Server nutzt, kommst du in einen richtigen Flow.

Zusammenfassung

CSS = Styling-Sprache für HTML. Regel-Aufbau: selektor { property: wert; }. Einbindung: extern (empfohlen, <link rel="stylesheet">), <style> im head, oder Inline. Selektor-Typen: Element (p), Klasse (.x), ID (#x), Attribut ([type=...]), Pseudo-Klassen (:hover), Kombinationen, Nachfahren (a b), Kinder (a>b). Spezifität bestimmt Konflikt-Sieger: IDs > Klassen > Elemente. Inline-style und !important sehr hoch. Kaskade: Quelle + Spezifität + Reihenfolge. Vererbung: Text-Eigenschaften ja, Box-Eigenschaften nein. Werte: Farben, Längen (px, em, rem, %, vw/vh), Zeit, calc/min/max/clamp.