CSS - Einführung in Cascading Style Sheets

Die grundlegende Idee von CSS ist es, den HTML-Code einer Website von allen Formatierungsbefehlen zu befreien. Man kann zwar prinzipiell auch CSS-Anweisungen direkt zu dem jeweiligen Objekt ("inline Style") oder im head jeder einzelnen html-Datei ("internes Stylesheet") zu notieren - optimalerweise aber wird Formatierung separat in einem eigenen Stylesheet-File, der *.css Datei, beschrieben. Eine html-Datei kann auch mehrere CSS-Stylesheets einbinden (dadurch kann man z.B. in Farb-, Schrift- und Layoutanweisungen gliedern).

Dieses Prinzip versucht, Inhalt und Struktur sauber vom Aussehen zu trennen.

Abb.: CSS verwirklicht die Trennung von Inhalt, Struktur und Aussehen

Erweiterung der Formatierungsmöglichkeiten
Im Vergleich zu den sehr beschränkten typografischen und Formatierungsoptionen von HTML bietet CSS viele weitere Möglichkeiten, die man auch aus dem Druckbereich kennt. Darüber hinaus erlaubt CSS, die Darstellung des Seiteninhaltes an das Ausgabemedium anzupassen - z.B. Formatierung für Monitordarstellung, für den Druck, Braille-Zeilen oder für mobile Geräte).

Erweiterung der Layoutmöglichkeiten
Mit CSS wird der Webdesigner tatsächlich zum Layouter. Das berühmt-berüchtigte Tabellen-Layout und Frame-Layout in HTML wird bei CSS durch frei positionierbare Elemente abgelöst.

Cascading Stylesheet-Dateien - *.css
Stylesheet Dateien sind genauso wie html-Dokumente oder auch Javascript-Files in normalem plain-Text beschrieben - zum Editieren genügt folglich ein beliebiger Texteditor, mehr Komfort und Syntax Highlighting bietet ein Editor wie z.B. Dreamweaver, Aptana oder Golive.

Ein Stylesheet besteht aus einer bis beliebig vielen einzelnen Anweisungen, die beschreiben wie bestimmte Objekte in einem HTML-Dokument durch ein Ausgabegerät dargestellt werden soll. Eine sehr einfache beispielhafte Anweisung setzt sich aus zwei Teilen zusammen:

• Dem Selektor (im Beispiel p): Welche Elemente sollen durch die Anweisung beschrieben werden
• einem Eigenschaft-Werte - Paar (color:black): Welche Eigenschaft der Elemente wird auf welchen Wert gesetzt?

p { color: black; }

Der Selektor befindet sich stets links und die Deklaration innerhalb einer geschwungenen Klammer. Eigenschaft und Wert sind durch einen Doppelpunkt getrennt und nach dem Wert folgt ein Semikolon. Man kann mit einem Selektor auch mehrere Eigenschaften auf einmal setzen; das folgende Beispiel würde für alle Überschriften erster Klasse in einem HTML-Dokument eine Schriftfarbe von schwarz und eine Hintergrundfarbe von Orange setzen:

h1 { color: black; background-color: orange; }

In einer Stylesheet Datei können jetzt mehrere dieser sogenannten "CSS-Selektoren" stehen, z.B. legen die beiden folgenden Zeilen das Aussehen von Überschriften erster Klasse und für Paragraphen fest:

h1 { color: red; background-color: yellow; }
p { color: green; }

Möchte man zwei verschiedenen Objekttypen diesselben Attribute zuweisen, kann man dies auch mit einer CSS-Regel zusammenfassen, im folgenden Beispiel wird die Textfarbe für Paragraphen und Links auf rot sowie ein fetter Schriftschnitt gesetzt; die Objektselektoren werden jeweils durch ein Komma getrennt:

p, a { color: red; font-weight: bold; }

Die bisher aufgezeigten Selektoren haben nur Objekte eines bestimmten Typs bschrieben; man kann aber auch

• benutzerdefinierte Klassen und Pseudoklassen erstellen,
• das Standard-Aussehen bestehender HTML-Tags verändern,
• und ID- sowie erweiterte Selektoren definieren (siehe weiter unten).

Teillayout mit CSS zur Schriftgestaltung

Diese Form des Einsatzes von CSS greift nur zur Definition des Schriftbildes auf die Möglichkeiten von Stylesheets zurück, zum Positionieren von Elementen wird auf klassisches Tabellen-Layout mit unsichtbaren Tabellen zurückgegriffen. Diese Form des "Layouts" war zu Zeiten von CSS Version ("Level") 1 die einfachste und manchmal einzige Möglichkeit, um browserübergreifend eine gleiche bzw. ähnliche Darstellung zu erzielen. Nachdem aber mittlerweile fast alle gängigen Browser CSS 2.1 zu in sehr hohem Ausmaß unterstützen, gilt das Tabellenlayout nicht mehr als praktikabel. Auch aus Sicht der Usability ist ein reines CSS-Layout (siehe unten) auf jedem Fall einem Tabellenlayout klar vorzuziehen.

Übungspeispiel für ein "Mischlayout" - klassisches Tabellenlayout erweitert um CSS

Komplettlayout mit CSS

Ab der CSS Version 2.1 ist es möglich, das komplette Layout einer HTML-Seite nur mit CSS-Angaben zu definieren: Nicht nur Farbe, Schriftart und -größe sondern sowohl Abmessungen als auch Positionierung der Elementen kann mit CSS gesteuert werden. Es sind keine Tabellen oder Frames mehr für die graphische Darstellung notwendig, vor allem kann abhängig vom Ausgabegerät ein jeweiliges Stylesheet verwendet werden, z.B. für Drucker eine farblose Darstellung mit möglichst hohen Kontrasten, ohne Hintergrundbilder und -farben.

Weiters kann man mit reinen CSS-Layouts auch Darstellungen vorsehen, die sich auf die verfügbare Bildschirmauflösung anpassen (siehe CSS basierte Layouts). Der Inhalt/Content einer HTML-Datei ist bei einem Komplettlayout mit CSS zur Gänze von der Darstellung/Repräsentation getrennt.

CSS wurde 1996 als Version ("Level") 1 vom W3C verabschiedet. Der Umfang war damals noch sehr überschaubar, die CSS-Spezifikation beschränkte sich hauptsächlich auf Text- und Farbgestaltung wie Hintergrundbilder. Das Hauptproblem bezüglich der Verwendung von CSS damals bestand v.a. darin, dass kaum einheitliche Implementierungen der CSS-Spezifikation durch die Browserhersteller gegeben war und somit die Verwendung von CSS lange tabuisiert wurde bzw. sehr umständlich war.

Im selben Jahr wurde der Wirkungsbereich von CSS auf das Layout ausgeweitet, das sogenannte CSS-Positioning. Diese Spezifikationen wurden in CSS Level 2, das bis dato Gültigkeit hat und jetzt de-facto Standard in gutem Webdesign ist (momentan Level 2 Revision 1, CSS 2.1), übernommen. Neben dem Layout regelt CSS mittlerweile auch das ausgabemediumabhängige Aussehen von HTML-Dokumenten. Probleme bei der Verwendung von CSS gibt es trotzdem nach wie vor durch uneinheitliche Interpretation durch die verschiedenen Browser - speziell im sog. "Quirksmode" (ein abwärtskompatibler alter Darstellungsmodus der Webbrowser, siehe "CSS Box Model") werden speziell Abstände und Objektbreiten unterschiedlich berechnet.

Microsoft hat erst sehr spät eine umfangreiche CSS-Unterstützung angeboten und geht bei der Darstellung leider manchmal noch immer „eigene Wege“, doch spätestens seit der Version 7 des Internet Explorers kann man von sehr guter browserübergreifender Unterstützung von CSS ausgehen.

Netscape hatte lange Zeit Probleme in der korrekten Darstellung der CSS "Layer", was zur Verwendung des (legendären aber mittlerweile obsoleten) Netscape LayerFix Scripts nötigte – dieser wurde sogar in das Autorentool Macromedia Dreamweaver (nunmehr Adobe Dreamweaver) implementiert. Dieser Fehler äußerte sich beim Vergrößern und Verkleiner des Browserfensters, bestimmte Seitenbereiche wurden danach einfach nicht mehr angezeigt.

Mittlerweile interpretieren alle Mozilla-basierten Browser CSS 2 im Sinne der W3C Spezifikationen fast vollständig, Microsofts Internet Explorer 7 bietet gegenüber Vorversionen eine umfangreich  verbesserte Implementierung der CSS Definitionen. Einen guten Überblick über die Entwicklung der wichtigsten Browser und deren Eigenschaften bzw. Features findet man unter http://www.quirksmode.org/browsers/history.html