Cascading Stylesheets (CSS) ist eine Formatierungssprache, mit der man eine Website gestalten kann. Aus HTML-Eementen baut man die Struktur einer Website auf. Mit CSS kann man diesen Elementen eine Form geben. Man gibt beispielsweise die Farbe, die Größe oder die Position eines Elements an.
Das funktioniert so: Einem HTML-Element — z.B.<h1> (das steht für eine Überschrift der Kategorie 1) – wird eine Eigenschaft zugewiesen, z. B. font-family: sans-serif.
Das wird folgendermaßen notiert:
h1 {font-family: sans-serif}
Möchte man dem h1-Element noch eine Schriftgröße zuweisen, z.B. 14px, dann schreibt man diese Angabe ebenfalls in die geschweiften Klammer:
h1 {font-family: sans-serif; font-size: 14 px}
Die Angaben werden mit einem Strichpunkt voneinander getrennt. Man kann beliebig viele Formatierungsanweisungen miteinander kombinieren.
Inhalt und Struktur sind getrennt
In der Regel legt man eine eigene Datei mit den Styles an. Das so genannte Stylesheet – im Prinzip eine einfach Textdatei – wird per Befehl in die HTML-Datei eingebunden. Ruft ein Browser die Seite auf, schaut er im Stylesheet nach, wie er die HTML-Elemente darstellen soll.
Dasselbe Stylesheet kann beliebig vielen HTML-Dateien zugeordnet werden. Das heisst, alle Seiten greifen dann auf dieselben Formatierungen zurück. Das hat einen großen Vorteil: Will man eine Formatierung ändern, z.B. die Schriftgröße, genügt eine kleine Korrektur im Stylesheet. Es ist nicht nötig, alle HTML-Seiten zu bearbeiten.
Die Vorteile von Cascading Stylesheets
- Änderungen an Formatierungen können schnell und an zentraler Stelle umgesetzt werden
- Mit CSS kann man Inhalte für unterschiedliche Ausgabemedien (z.B. Bildschirmdarstellung, Druckversion, Smartphone) optimieren.
- Der HTML-Code bleibt schlank, da die Formatierungen nur einmal zentral festgelegt werden.
- Schlanker Code bedeutet weniger Traffic auf dem Server und spart Kosten.
- Die Seiten sind mit deutlich weniger Zeitaufwand zu pflegen.
CSS bieten sehr umfangreiche und reizvolle Möglichkeiten, eine Webseite zu gestalten, die weit über die Möglichkeiten von reinem HTML hinausgehen. Sehr schöne und anschauliche Beispiele für das, was mit CSS möglich ist, zeigen diese Seiten: www.csszengarden.com
Foto: istockphoto.com