Was sind CSS?

Cascading Style Sheets sind Formatvorlagen für Websites. Das Prinzip ist aus Textverarbeitungs- und Layoutprogrammen bekannt: Nach der Definition logischer Elemente (Überschrift, Absatz, Zitat etc.), die den Text strukturieren, können zu jedem dieser Elemente eigene "Regeln" definiert werden, also Auszeichnungsangaben oder auch "Formate". So kann der "Überschrift" das Format "Font: Verdana; Textgröße: 14pt; Textfarbe: Schwarz; uvm." zugewiesen werden.

Automatisiert wird nun jeder Text, der als "Überschrift" definiert wurde, mit diesen Angaben ausgezeichnet. Der Vorteil liegt zum einen in der Arbeitsersparnis (denn die Formatvorlage wird nur einmal erstellt und danach automatisiert angewendet), zum anderen in der einfachen – weil zentralen – Verwaltung. So muss bei einer Änderung z.B. der Schriftgröße bei den Überschriften nicht manuell jede Überschrift einzeln editiert werden, eine Änderung nur der Formatvorlage reicht schon, um automatisiert alle damit verknüpften Elemente (also Texte) zu aktualisieren.

CSS dienen dazu, (X)HTML-Code von Beschreibungen, die das Aussehen des Dokuments bestimmen, zu befreien. (X)HTML soll – im Idealfall –den Inhalt nur logisch bzw. semantisch beschreiben/strukturieren. Die tatsächliche Formatierung und die Angaben zur Visualisierung werden in die CSS ausgelagert.
 

 

 
Geschichte
Bereits 1996 wurde die erste Version des Cascading Stylesheets als CSS Level 1 offiziell verabschiedet. Sie beschränkte sich hauptsächlich auf die Gestaltung von Text und den Einsatz von Farbe. Im gleichen Jahr veröffentlichte Microsoft den Internet Explorer 3.0, der bereits eine (sehr) rudimentäre CSS-Interpretation enthielt.

1997 erscheint der erste Arbeitsentwurf des W3C zu CSS Level 2, das nun auch die Positionierung von Elementen über CSS mit einschloss. 

2000 wird der erste Arbeitsentwurf zu CSS Level 3 veröffentlicht. CSS Level 3 befindet sich noch in der Entwicklungsphase, CSS Level 2 wurde zwischenzeitlich mehrfach verbessert und optimiert.

 
 
Kompatibilität
Die Verwendung von CSS hat erst vor relativ kurzer Zeit ihren Durchbruch gefunden. Ausschlag gebend dafür ist die zunehmende Unterstützung der Sprache durch die Browserhersteller. Da Webentwickler nie nur auf die aktuellste Software hin Websites optimieren (sollten!), sondern auch zu älteren Softwareprodukten kompatibel produzieren, schließt dies Techniken aus, die von noch immer weit verbreiteten Browsern nicht unterstützt werden. Microsoft hat seit dem Internet Explorer 5.x eine nach heutigen Gesichtspunkten (gerade noch) akzeptable Implementierung der CSS-Sprache vorgenommen, bei Netscape ab der Version 6.x. Neue Browser wie Firefox, Safari oder aktuelle Operaversionen spielen hier z.Z. noch Vorreiterrollen.

Der Befehlssatz von CSS Level 2 ist ausgesprochen umfangreich (die offizielle Empfehlung des W3C vom Mai 1998 umfasst etwa 340 Seiten), doch werden nur ein Teil der definierten Stile plattform- und browserübergreifend unterstützt.

In diesem Tutorial werden daher nur die CSS-Angaben (Stile) vermittelt, die nach dem aktuellen Stand (2005) von der Mehrzahl der Browser unterstützt werden.
 

 
Vor- und Nachteile

Vorteile

  • Einfacher Texteditor genügt (für Computer-Plattformen verfügbar).
    Mac: SimpleText, Taco
    Windows: Notepad, Proton
  • CCS sind leicht erlernbar.
  • Formatierungen von Elementen können zentral angelegt und verwaltet werden (arbeitserleichternd weil bessere Kontrolle).
  • Formatierungen von identischen Inhalten für unterschiedliche Ausgabemedien (Drucker, Screen, PDA) sind möglich.
  • Unabdingbar für barrierefreie Websites (durch die Trennung der Formatierung von der Struktur).
  • CSS bieten neue Gestaltungsmöglichkeiten, die bisher nicht möglich waren (z.B. nicht kachelnde Hintergrundgrafiken, frei Positionierung von Elementen ohne Tabellenkonstruktionen uvm.).
  • Schlankere (X)HTML-Dokumente, auch bei aufwendigeren Layouts.

Nachteile

  • CSS werden nicht umfassend unterstützt, die Verwendung von Browserkompatibilitätstabellen sind beim intensiven Einsatz von CSS unerläßlich
  • Einige Browser stellen nicht nur einige Stile nicht dar, durch eine fehlerhafte Implementierung kann es trotz korrekten CSS-Angaben auch zu Fehldarstellungen kommen.