CSS – Styling, Layout und moderne Techniken
CSS (Cascading Style Sheets) steuert das visuelle Erscheinungsbild von HTML-Elementen. Moderne CSS-Techniken wie Flexbox, Grid und Custom Properties haben das Layout-Paradigma grundlegend verändert — komplexe Layouts die früher JavaScript erforderten, sind heute mit wenigen CSS-Zeilen lösbar.
Moderne Layout-Techniken
Flexbox
Eindimensionales Layout-System — Elemente in einer Reihe oder Spalte anordnen. Perfekt für Navigation, Karten-Reihen, zentrierte Elemente. Wichtigste Properties: display: flex, flex-direction, justify-content, align-items, gap, flex-wrap.
CSS Grid
Zweidimensionales Layout-System — Zeilen und Spalten gleichzeitig definieren. Perfekt für Seiten-Layouts, Galerien, komplexe Komponenten. Wichtigste Properties: display: grid, grid-template-columns, grid-template-rows, gap, grid-area.
Container Queries
Wie Media Queries — aber für Containerbreite statt Viewport-Breite. Komponenten reagieren auf ihren eigenen Container statt auf den Bildschirm. Revolutionär für wiederverwendbare Komponenten die in verschiedenen Contexts funktionieren müssen.
CSS Custom Properties
Variablen in CSS — wiederverwendbare Werte die einmal definiert und überall genutzt werden. Basis für Design-Token-Systeme und Theme-Switching. Liveänderbar per JavaScript. Syntax: --variable-name: wert; Verwendung: var(--variable-name).
Das Box-Modell
Jedes HTML-Element ist eine Box mit: Content (Inhalt), Padding (Innenabstand), Border (Rahmen) und Margin (Außenabstand). box-sizing: border-box ist moderne Pflicht — es sorgt dafür dass Padding und Border die Gesamtgröße nicht vergrößern, sondern nach innen berechnet werden.
Häufig gestellte Fragen
Flexbox oder Grid — was wann?
Flexbox für eindimensionale Layouts (eine Reihe ODER eine Spalte). Grid für zweidimensionale Layouts (Zeilen UND Spalten gleichzeitig). In der Praxis: Grid für das Seiten-Layout, Flexbox für Komponenten innerhalb. Beide können auch kombiniert werden.
Was sind CSS-Spezifitäten und warum sind sie wichtig?
Spezifität bestimmt welche CSS-Regel gewinnt wenn mehrere auf dasselbe Element zutreffen. Inline-Styles > IDs > Klassen > Elemente. Hohe Spezifität durch zu viele IDs oder !important führt zu schwer wartbarem CSS. :where() als moderne Alternative mit Spezifität 0.