Cascading Style Sheets

Colors, fonts and beyond. It is awesome. Really.

Was ist CSS?

Beim Stylen von Webseiten geht es darum, das Aussehen (z.B. Farben, Typografie, Abstände) von HTML-Elementen festzulegen. Früher hat man die Stylingmöglichkeiten von HTML genutzt, heute verwendet man eine eigene Stylingsprache: Cascading Style Sheets (CSS). Ziel ist es, den Inhalt einer Webseite vom Aussehen einer Webseite zu trennen. Deshalb lautet die Strategie: am Anfang erst einmal ohne CSS. Dies bedeutet, wir strukturieren die Webseite (Überschriften, Tabellen, Aufzählungen ...) zunächst und überlassen dem Browser die Darstellung der Elemente (Standarddarstellung). Danach kommt dann das Styling zum Einsatz - also CSS. Es ist gewissermassen eine Ergänzungssprache für HTML und erlaubt das beliebige Styling einzelner HTML-Elemente. Wir können zum Beispiel festlegen, dass alle Überschriften 24 Punkt gross sind und mit einem grünen Rahmen versehen sind. Bei CSS gibt es zahlreiche (!) Möglichkeiten für das Styling. Wir beschränken uns hier auf ausgewählte Möglichkeiten.

Cascading bedeutet, dass ein Style an alle verschachtelten HTML-Elemente weitergereicht wird. Falls die Schriftfarbe des body-Elements auf Blau gesetzt wird, dann ist die Schriftfarbe aller verschachtelten HTML-Elemente ebenfalls blau sein. Wir können dies natürlich mit einem Style überschreiben.

CSS Logo

CSS Logo

Was ist eine CSS-Datei?

CSS erlaubt es, Stile, Farben und Formen zu definieren. Diese Definitionen werden in einer separaten Style-Datei, der CSS-Datei, definiert. Wie schon HTML ist auch CSS keine Programmiersprache. Eine CSS-Datei können wir dann in beliebig viele HTML-Dateien einbinden. So werden einheitliche Stylevorgaben möglich, und der HTML-Code wird von Ballast befreit. Spätere Änderungen am Design können so leicht durchgeführt werden. Möchten wir z.B. die Überschriften ändern, dann müssen wir nur in der CSS-Datei eine Anpassung vornehmen und nicht in allen HTML-Dateien. CSS-Dateien haben die Dateinamen-Erweiterung .css.
CSS und HTML Dateien

Was macht der Browser?

Wenn ein Browser eine HTML-Datei herunterlädt, dann werden auch alle referenzierten CSS-Dateien heruntergeladen. Der Browser liest den Inhalt der CSS-Dateien und wendet die Styles beim Rendering an. Nicht alle Browser unterstützen alle CSS-Styles. Man kann mit einer Website prüfen, welche Styles unterstützt werden (siehe https://css3test.com).

Lernziele

Links