Cascading Style Sheets - Tutorial für WebDesigner und WebDesignerinnen


Letzte Änderung am 21.01.2005
Cascading Style Sheets - ein Tutorial
Vorbemerkung: Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004.
Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden. CSS-Bereiche, die in den gängigen Browsern bisher nicht implementiert wurden, werden nicht dokumentiert.
Andreas Lutz MatteDesign, Bern

Kapitelübersicht

Kapitel 1: CSS und Dokumente

Historischer Rückblick und allgemeine Charakterisierung
In den frühen Jahren des WWW (1990-1993), war HTML eine einfache, strukturbezogene Sprache , welche sich auf die Erzeugung von Absätzen, Hyperlinks, Überschriften und Listen beschränkte. Sie diente einzig und allein der Beschreibung von Seiteninhalten, und war nichts als ein ein kleines sauberes Markup-Schema.

Dann kam Mosaic. Das WWW verbreitete sich in Windeseile und es war möglich, Farbe in Texten und auch Bilder auf eine Seite zu bringen. Die Nachfrage nach neuen HTML-Elementen wuchs rasant an. Es entstand ein Bedarf nach Präsentations-Elementen wie fette Schriften oder italic-text. HTML wandelte sich von einer strukturellen, zu einer präsentationsorientierten Sprache. Besonders die Versionen HTML 3.2 und HTML 4.0 waren durchsetzt von diesen neuen Elementen, die in erster Linie der bessern Präsentation dienen sollten.

Aus struktureller Sicht gesehen, ist das font-Tag ein inhaltsloses Tag. Gebilde wie font size="+3" face="Helvetica" color="red" Page Title - anstelle von H1-Tags, füllten die Seiten. Damit begannen die Probleme beispielsweise mit Pagereadern für Sehbehinderte oder mit Vorlese-Geräten. Auch Suchmaschinen, welche sich an Strukturelementen wie title, Hx-Überschriften oder p und andern Elementen orientierten, bekamen Probleme mit der Indexierung. Generell gesagt, ist strukturiertes Markup viel einfacher zu handeln als eine unübersehbare Zahl von beschreibenden Einzelelementen oder komplexen verschachtelten Tabellen.

CSS als Rettungsanker
So entstand 1995/96 das vom W3C lancierte CSS. Seine Möglichkeiten zur Präsentation übertrafen HTML schon von Anfang an bei weitem. Überschriften konnten nun vollständig redefiniert werden, Hintergrundbilder positioniert und grafisch strukturiert werden etc. Das wichtigste jedoch war die eindrückliche Vereinfachung der Verwendung, welche den Arbeitsaufwand von WebpublisherInnen für die Gestaltung der Site in kürzester Zeit drastisch reduzierten.

Endlich konnten Style-Definitionen nicht nur zentral, kollektiv für verschiedene Tags, sondern auch durch einfache Einbindung.für unendlich viele Seiten wirksam gemacht werden. Doch nicht nur das. Darüberhinaus bietet CSS in der "Kaskadierung" (CSS=Cascading Style Sheets) Regeln an, wie konkurrierende Styledefinitionen mit der Situation umgehen. So gilt die Faustregel, dass je "näher" das CSS beim zu definierenden Element ist, desto mehr wird es bei der Verwendung priorisiert. Regeln im HEAD-Bereich der Datei "überschreiben" die Regeln einer importierten Datei und Inline-Styles gelten vor allen andern Definitionen desselben Elements. Mit zusätzlichen Angaben wie 'important!', kann ausserdem die prioritäre Gültigkeit zusätzlich beeinflusst werden. So ist es möglich, "user style sheets" zu definieren, welche einem Surfer, der beispielsweise farbenblind ist, das individuelle Aussehen der Site zu bestimmen.

Style-Sheets fallen ausserdem durch ihre ausserordentliche Kompaktheit auf, was die Ladegeschwindigkeit einer Seite massgeblich beeinflusst. Im Gegensatz zur strukturellen Sprache HTML ist CSS eine stilorientierte (stylistic) Sprache und muss als Komplement zu HTML verstanden werden. Dies führte dazu, dass insbesondere bei der Standardisierung von XHTML durch das W3C eine grosse Menge von präsentationsorientierten Tags als "depreciated" erklärt werden konnten. So erhielt HTML seine strukturell orientierte Funktion zurück. (Um die Abwärtskompatibilität gewährleisten zu können, wurden in den Doctype-Definitionen die Begriffe "Strict" und "Transitional" eingeführt: Strict interpretiert streng nach (X)HTML-Version, während Transitional den Einsatz verblichener HTML-Angaben noch erlaubt.)

Weiter zu: Elementarten in CSS