Cascading Style Sheets

CSS (Cascading Style Sheets) ist die Gestaltungssprache des Webs: Sie steuert Layout, Farben und Schrift und trennt Gestaltung vom Inhalt. Das macht Code schlanker, Änderungen einfacher und Seiten schneller – wichtig für Nutzer und Core Web Vitals.

Cascading Style Sheets – kurz CSS – sind eine Gestaltungssprache, die vom World Wide Web Consortium (W3C) standardisiert und weiterentwickelt wird. Neben HTML und JavaScript gehört CSS zu den Kernsprachen des World Wide Web. In den Stylesheets wird festgelegt, wie eine Webseite aussieht: Layout, Farben, Abstände, Typografie und Animationen. Der grosse Vorteil: Inhalt und Gestaltung sind voneinander getrennt. Den Inhalt und seine Struktur beschreibt die Auszeichnungssprache HTML, das Aussehen regelt CSS. So lassen sich beide unabhängig voneinander schreiben und ändern.

CSS für einheitliche Gestaltung beim Web-Design

Wie bei den meisten Web-Standards war das Ziel von CSS eine einheitliche Sprache, die allen bei der Gestaltung von Webseiten hilft. Das erleichtert die gemeinsame Arbeit an einer Website, etwa wenn mehrere Entwickler in einer Agentur an einem Shop arbeiten, denn alle verwenden dieselbe Gestaltungssprache. Dank W3C gilt CSS weltweit als Standard und wird von allen gängigen Browsern unterstützt.

Bestandteile von Cascading Style Sheets

Stylesheets bestehen aus Regeln (Rules). Jede Regel legt fest, für welche Elemente einer Seite sie gilt – das ist der Selektor – und welche Eigenschaften diese Elemente erhalten. Ein Beispiel: Mit der Regel h2 { font-size: 1.5rem; color: #333; } erscheinen alle Zwischenüberschriften der Ebene 2 in derselben Grösse und Farbe. Über Klassen, IDs und Kombinationen lassen sich Selektoren beliebig genau fassen. Gelten mehrere Regeln für dasselbe Element, entscheidet die „Kaskade“ – daher der Name – anhand von Reihenfolge und Spezifität, welche Regel gewinnt.

Vorteile von CSS als Gestaltungssprache in einem HTML-Dokument

Ohne CSS müssten Gestaltungsangaben direkt an jedes einzelne HTML-Element geschrieben werden. Das ist schon bei wenigen Seiten aufwendig und wird mit jeder weiteren Seite unübersichtlicher. Mit CSS legt man die Gestaltung einmal zentral fest, und sie gilt für alle gleichartigen Elemente. Das hält den Quellcode schlank und übersichtlich. Änderungen am Design sind an einer Stelle erledigt, Fehler müssen nur einmal korrigiert werden. Für SEO und Ladezeit gilt: Schlankes, gut strukturiertes CSS lädt schneller. Mit Techniken wie Critical CSS werden die für den sichtbaren Bereich nötigen Regeln zuerst geladen, was die Core Web Vitals verbessert. Ungenutztes CSS, wie es Themes und Plugins oft mitbringen, bremst dagegen den Seitenaufbau.