CSS

CSS besteht aus Regeln. Jede Regel sagt dem Browser, für welche Elemente sie gilt und was sich ändern soll, etwa: Alle Hauptüberschriften werden dunkelblau und 40 Pixel groß. Diese Regeln stehen meist in einer eigenen Datei, die alle Seiten der Website gemeinsam nutzen.

Das hat einen praktischen Vorteil. Soll die Hausfarbe ein wenig heller werden, ändert man sie an einer Stelle, und die ganze Website zieht mit. Moderne Stylesheets arbeiten dafür mit Variablen, in denen Farben und Schriftgrößen einmal hinterlegt sind. So bleibt die Seite nah an deinem Corporate Design (Ratgeber Corporate Design).

Das „Cascading“ im Namen beschreibt, was passiert, wenn sich zwei Regeln widersprechen. Dann gewinnt in der Regel die genauere. Eine Anweisung für einen einzelnen Button schlägt also die allgemeine Anweisung für alle Buttons.

Mit CSS lässt sich festlegen, dass sich das Layout ab einer bestimmten Bildschirmbreite ändert. Aus drei Spalten am Desktop wird auf dem Handy eine, das Menü klappt zusammen, Schriften werden etwas kleiner. Das ist die Grundlage von Responsive Webdesign. Auch eine eigene Druckansicht lässt sich so anlegen, in der Menü und Footer wegfallen und nur der Inhalt auf dem Papier landet.

Für die Anordnung von Elementen gibt es in CSS zwei Werkzeuge, Grid und Flexbox. Wann welches passt, erklärt der Ratgeber CSS Grid vs. Flexbox.

Der Browser muss das CSS laden, bevor er die Seite richtig anzeigen kann. Große Stylesheets verlängern deshalb die Ladezeit. Bei WordPress-Seiten kommt das häufig vor, weil jedes Plugin und jeder Page Builder eigene Styles mitbringt, auch für Funktionen, die auf der Seite gar nicht vorkommen. Ein Teil davon lässt sich mit Optimierungs-Plugins zusammenfassen und verkleinern.

Wer CSS sauber aufbaut, vermeidet außerdem doppelte Regeln, die sich gegenseitig überschreiben. Sonst sieht ein Button auf jeder Unterseite ein bisschen anders aus, und niemand weiß mehr genau, warum. Auch Kontraste gehören hierher: Ob grauer Text auf hellem Grund noch gut lesbar ist, entscheidet sich im CSS.

Unsere Websites bauen wir mit WordPress und Elementor oder WPBakery. Die Gestaltung legen wir dort über die Bedienoberfläche an, der Page Builder schreibt daraus das CSS (Webdesign). Was der Builder nicht abdeckt, ergänzen wir im Code (Web-Entwicklung).

Verwandte Begriffe: HTML · Responsive Webdesign · Styleguide · Page Builder