Was CSS macht

Eine einzige CSS-Datei kann alle Seiten einer Website auf einmal neu gestalten. Das war das wichtigste Argument für CSS, als das W3C im Dezember 1996 CSS Level 1 veröffentlichte.

Struktur in HTML, Aussehen in CSS

HTML sagt, was jeder Teil einer Seite ist: eine Überschrift, eine Liste, ein Formular. CSS, kurz für Cascading Style Sheets, sagt, wie diese Teile aussehen sollen: Farben, Schriften, Größen, Abstände und ihre Position auf dem Bildschirm. Beides getrennt zu halten, hat praktische Vorteile. Du kannst das Aussehen einer ganzen Website ändern, indem du ein einziges Stylesheet bearbeitest. Dasselbe HTML kann auf dem Handy, auf einem großen Monitor und auf Papier unterschiedlich aussehen. Und Leserinnen und Leser können eigene Stile anwenden, etwa größere Schrift, ohne dass die Seite kaputtgeht.

Håkon Wium Lie begann im Oktober 1994 am CERN mit der Arbeit an CSS, Bert Bos kam 1995 dazu, und am 17. Dezember 1996 veröffentlichte das W3C CSS Level 1 als Empfehlung. CSS 2 folgte im Mai 1998. Seitdem ist CSS in Module aufgeteilt, etwa Color, Selectors, Flexbox und Grid, und jedes entwickelt die CSS Working Group des W3C in eigenem Tempo weiter. Ein einzelnes CSS4 gibt es nicht. Die Arbeitsgruppe veröffentlicht stattdessen eine Übersicht, welche Module stabil sind.

Wie eine Regel aufgebaut ist

Ein Stylesheet ist eine Liste von Regeln. Jede Regel beginnt mit einem Selektor, der sagt, für welche Elemente sie gilt. Danach folgt ein Deklarationsblock in geschweiften Klammern. Im Block besteht jede Deklaration aus einer Eigenschaft, einem Doppelpunkt, einem Wert und einem Semikolon. In der Regel oben wählt h1 jede Überschrift der ersten Ebene aus, und die beiden Deklarationen machen diese Überschriften blau und 32 Pixel hoch. Leerzeichen und Zeilenumbrüche innerhalb einer Regel spielen keine Rolle, deshalb schreiben die meisten jede Deklaration in eine eigene Zeile, damit alles lesbar bleibt.

Trifft der Browser auf eine Deklaration, die er nicht versteht, etwa eine falsch geschriebene Eigenschaft oder einen unsinnigen Wert, überspringt er genau diese Deklaration und macht mit der nächsten weiter. Das ist Absicht: So können neue CSS-Funktionen hinzukommen, ohne ältere Browser kaputtzumachen. Die Kehrseite: Ein einziges fehlendes Semikolon kann die folgende Deklaration unbemerkt verschlucken, weil beide zu einer ungültigen Deklaration zusammenlaufen. Wenn ein Stil nicht greift, prüf zuerst die Satzzeichen. Kommentare schreibt man /* so */.

Drei Wege, CSS einzubinden

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Ein externes Stylesheet, eingebunden im <head> mit <link rel="stylesheet">, ist die übliche Wahl für eine echte Website: Alle Seiten teilen es, und der Browser lädt es einmal herunter und behält es im Cache. Ein <style>-Element enthält Regeln für eine einzelne Seite, und genau das verwenden die Übungen in diesem Kurs. Das Attribut style wendet Deklarationen auf ein einzelnes Element an. Für einen schnellen Test ist das praktisch, aber schwer zu pflegen, weil man dasselbe Aussehen an jedem Element wiederholen muss.

Der Browser hat schon Stile

Selbst eine Seite ganz ohne CSS hat ein Aussehen: Überschriften sind groß und fett, Links blau und unterstrichen, Listen eingerückt. Das kommt aus dem Standard-Stylesheet des Browsers, dem sogenannten User-Agent-Stylesheet. Deine Regeln werden darüber angewendet. Deshalb war die Bäckerei-Seite aus dem HTML-Kurs schon lesbar, bevor sie CSS hatte, und deshalb ändert ein gutes Stylesheet nur das, was nötig ist.