Definition
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die das visuelle Erscheinungsbild von HTML-Dokumenten definiert. CSS steuert Layout, Farben, Typografie, Abstände und Animationen einer Webseite und trennt damit die Darstellung vom strukturellen Inhalt (HTML).
Bedeutung
CSS bestimmt, wie eine Website auf verschiedenen Geräten dargestellt wird. Aus Performance-Perspektive hat CSS einen direkten Einfluss auf Core Web Vitals: Unkontrolliertes CSS verursacht Cumulative Layout Shift und kann den Largest Contentful Paint verzögern. Professionell strukturiertes CSS ist daher keine ästhetische Frage, sondern ein technischer Ranking-Faktor.
Funktionsweise
Der Browser lädt HTML und CSS, erstellt daraus den DOM und den CSSOM und kombiniert beide zum Render Tree. CSS-Regeln werden kaskadierend angewendet: Spezifischere Selektoren überschreiben allgemeinere. Moderne Techniken wie Grid und Flexbox ermöglichen komplexe Layouts ohne JavaScript, während Custom Properties ein konsistentes Design-System ermöglichen.
Praxisbeispiel
Eine Unternehmenswebsite definiert in einer zentralen CSS-Datei ein Design-System mit Farbvariablen, Typografie-Skala und Layout-Regeln. Alle Seiten greifen auf dieses System zurück. Gleichzeitig wird kritisches CSS inline ausgeliefert, um die Rendergeschwindigkeit zu maximieren.
Verwandte Begriffe
- HTML: Die Auszeichnungssprache für Struktur und Inhalt, während CSS die visuelle Darstellung steuert.
- Core Web Vitals: Googles Performance-Metriken, bei denen unoptimiertes CSS den CLS und LCP negativ beeinflusst.
- Responsive Design: Ein CSS-basiertes Gestaltungsprinzip mit Media Queries für unterschiedliche Bildschirmgrößen.
- DOM: Die baumartige Repräsentation einer Webseite, die der Browser aus HTML und CSS zusammensetzt.