Eine kleine Seite gestalten

Die Bäckerei-Seite aus dem HTML-Kurs bekommt ihre Farben, Abstände und ihr Layout aus etwa 40 Zeilen CSS, und das HTML ändert sich überhaupt nicht.

Erst entscheiden, dann Regeln schreiben

Bevor du Regeln schreibst, triff eine Handvoll Entscheidungen: eine Akzentfarbe, eine Textfarbe und einen Hintergrund mit genug Kontrast, eine Schriftliste, eine Grundgröße und eine Abstandsstufe, die sich überall wiederholt (zum Beispiel 8, 16 und 24 Pixel). Eine Seite, die wenige Werte wiederverwendet, wirkt ruhig und durchdacht. Eine Seite, auf der jede Box einen eigenen, leicht anderen Margin hat, wirkt unordentlich, auch wenn niemand sagen kann, warum. CSS hat dafür eine eigene Funktion: Custom Properties.

Custom Properties

Eine Custom Property (benutzerdefinierte Eigenschaft) ist ein selbst erfundener Name, der mit zwei Bindestrichen beginnt und einen Wert enthält: --accent: #1a5fb4;. Leg deine Entscheidungen einmal auf :root fest, also auf dem html-Element, und verwende sie überall mit var(): background: var(--accent);. Custom Properties werden wie Texteigenschaften vererbt, daher kann jedes Element die auf der Wurzel definierten lesen. Die Akzentfarbe der ganzen Website zu ändern, heißt jetzt, eine einzige Zeile zu bearbeiten. Du kannst eine Eigenschaft auch innerhalb einer Media Query neu festlegen, etwa um die Farben für prefers-color-scheme: dark zu tauschen.

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

Das Stylesheet von oben nach unten gelesen

Das Stylesheet oben nutzt etwas aus fast jeder Einheit. Die Wurzel enthält die Entscheidungen. body setzt Schrift, Zeilenhöhe und Farben einmal, und die Vererbung trägt sie in jeden Absatz. Der Kopfbereich ist eine umbrechende Flex-Zeile, damit das Menü auf einem schmalen Handy unter den Namen rutscht, statt gequetscht zu werden. main hat eine max-width und margin: 0 auto. Das hält die Zeilen lesbar und zentriert den Inhalt auf breiten Bildschirmen. Die Karten nutzen das Grid-Muster mit auto-fill, so brechen sie ohne Media Query von einer Spalte in mehrere um, und die Bilder sind flexibel. Der Button bekommt eine Hover-Farbe und, genauso wichtig, eine sichtbare Fokus-Outline für Tastaturnutzer.

Auf echten Bildschirmen prüfen

CSS testen heißt hinschauen. Öffne die Seite in einem schmalen Fenster (320 Pixel für den Reflow-Test der WCAG) und in einem breiten, und achte auf seitliches Scrollen und Text, der an die Ränder stößt. Zoome auf 200 Prozent. Geh mit der Tab-Taste durch die Seite und prüf, dass du immer siehst, wo der Fokus ist. Prüf den Kontrast von Text und Buttons in den Entwicklerwerkzeugen. Schalte den Dunkelmodus oder die Einstellung für reduzierte Bewegung deines Systems ein, wenn du dafür gestaltet hast. In den Entwicklerwerkzeugen des Browsers kannst du jeden Wert live ändern und das Box-Modell jedes Elements sehen. So findest du am schnellsten heraus, warum etwas dort ist, wo es ist.

Von hier aus lassen sich dieselben Bausteine auf jede Website übertragen. Größere Projekte teilen das Stylesheet in Dateien auf, benennen Klassen danach, was eine Komponente ist (Karte, Button, Seitenkopf), und halten eine kurze Liste gemeinsamer Custom Properties. Die Regeln darunter sind aber die aus diesen neun Einheiten.