Lernziele
- Verstehen, wie CSS mit HTML zusammenspielt
- Selektoren und das Box-Modell kennen
- Wissen, was „Cascading“ bedeutet
- Responsives Layout im Grundsatz verstehen
Selektoren verbinden CSS mit HTML
CSS wählt HTML-Elemente über Selektoren aus und weist ihnen Eigenschaften zu. Man kann nach Element (p), Klasse (.button) oder ID (#header) auswählen.
.button {
background: #111;
color: #fff;
padding: 12px 20px;
border-radius: 999px;
}Das Box-Modell
Jedes Element ist eine Box aus Inhalt, padding (Innenabstand), border (Rahmen) und margin (Außenabstand). Wer das Box-Modell versteht, versteht Layout in CSS.
Was „Cascading“ bedeutet
Mehrere Regeln können dasselbe Element betreffen. Die Kaskade entscheidet über Spezifität und Reihenfolge, welche Regel gewinnt. Moderne Layouts nutzen Flexbox und Grid, um Elemente flexibel anzuordnen.
Flexbox und Grid: die zwei Layout-Systeme
Früher zwang man Elemente mit floats und Tricks in Form — heute übernehmen das zwei moderne CSS-Systeme. Flexbox ordnet Elemente entlang einer Achse an, etwa eine Navigationsleiste oder eine Reihe von Karten, und verteilt den verfügbaren Platz automatisch. CSS Grid arbeitet zweidimensional in Zeilen und Spalten und eignet sich für ganze Seitenlayouts. In der Praxis kombiniert man beide: Grid für die grobe Seitenstruktur, Flexbox für die Anordnung innerhalb einzelner Bereiche.
Responsives Design mit Media Queries
Eine Website muss heute auf dem Smartphone genauso gut aussehen wie auf dem Desktop. Media Queries in CSS erlauben es, Regeln nur ab oder bis zu einer bestimmten Bildschirmbreite anzuwenden. Der bewährte Ansatz ist „Mobile First“: Man gestaltet zuerst für kleine Bildschirme und ergänzt für größere. Statt fester Pixelwerte nutzt man dabei flexible Einheiten wie Prozent, rem oder die moderne clamp()-Funktion, damit Schrift und Abstände flüssig mitwachsen.
CSS-Variablen und Design-Tokens
Moderne Projekte definieren Farben, Abstände und Schriftgrößen an einer zentralen Stelle als CSS-Variablen (auch Custom Properties genannt). Ändert man einen Wert dort, passt sich die ganze Seite an — die Basis jedes Design-Systems. Solche Design-Tokens sorgen für Konsistenz über viele Seiten hinweg und machen ein Theme, etwa einen Dark Mode, mit wenigen Zeilen umschaltbar. Aus verstreuten Farbwerten wird so ein pflegbares, verlässliches System.
Zustände mit Pseudoklassen gestalten
Elemente sehen nicht immer gleich aus: Ein Button reagiert auf den Mauszeiger, ein Eingabefeld auf den Tastaturfokus, ein deaktivierter Link soll gedämpft wirken. Für solche Zustände kennt CSS Pseudoklassen. Mit :hover gestaltet man die Maus-Reaktion, mit :focus-visible die Tastatur-Navigation, mit :disabled gesperrte Bedienelemente und mit :nth-child jede zweite Zeile einer Tabelle. Besonders wichtig ist der Fokus-Zustand: Er zeigt Menschen, die per Tastatur navigieren, wo sie sich gerade befinden. Der Standard-Rahmen des Browsers wirkt oft unschön — entfernen darf man ihn trotzdem nur, wenn man an seiner Stelle eine deutlich sichtbare eigene Markierung setzt.
Vererbung: Warum manche Werte durchsickern
Nicht jede Eigenschaft wirkt nur dort, wo man sie notiert. Typografische Angaben wie color, font-family oder line-height vererben sich an alle Kindelemente — deshalb genügt es, die Grundschrift einmal am <body> zu setzen, statt sie an jedem Absatz zu wiederholen. Eigenschaften, die den Kasten selbst betreffen, etwa margin, border oder background, vererben sich dagegen nicht. Dieses Verhalten erklärt viele Überraschungen: Eine Farbe, die plötzlich überall auftaucht, stammt meist von einem Elternelement. Mit den Schlüsselwörtern inherit und initial lässt sich die Vererbung an einer Stelle gezielt erzwingen oder zurücksetzen.
Wichtige Begriffe
- Selektor
- Bestimmt, welche Elemente eine Regel betrifft.
- Box-Modell
- Content, padding, border und margin eines Elements.
- Flexbox
- Ein-dimensionales Layout-System für Reihen/Spalten.
- Media Query
- Regel, die nur bei bestimmter Bildschirmgröße greift.
- Pseudoklasse
- Selektor für einen Zustand eines Elements, z. B. :hover oder :focus.
Typische Fehler
- Zu hohe Spezifität (verschachtelte Selektoren, !important überall)
- Feste Pixelbreiten statt flexibler Einheiten
- Kein Mobile-First-Ansatz
- Den Fokus-Rahmen entfernen, ohne einen sichtbaren Ersatz zu setzen
Best Practices
- Mobile First denken und mit Media Queries hochskalieren
- Wiederverwendbare Klassen statt Inline-Styles
- Design-Tokens (CSS-Variablen) für Farben und Abstände
Zusammenfassung
CSS gestaltet HTML: Farben, Typografie, Abstände und Layout. Das Box-Modell und die Kaskade sind die Kernkonzepte. Mit Flexbox, Grid und Media Queries entstehen moderne, responsive Oberflächen.
Häufige Fragen
Tailwind ist ein Utility-CSS-Framework: fertige Klassen für gängige Eigenschaften. Darunter liegt immer normales CSS — das Verständnis der Grundlagen bleibt wichtig.
Weiterführende Links
Braucht ihr Unterstützung bei Webentwicklung?
Wir setzen genau solche Themen in echte Projekte um.