CSS

CSS bedeutet Cascading Style Sheets und ist eine deklarative Sprache, mit der in der Praxis in erster Linie Stilvorlagen für die Gestaltung von Internetseiten festgelegt werden. Die grundlegende Idee, die hinter CSS steht, ist die Trennung von Form und Inhalt eines Dokuments. Während der Inhalt nach wie vor innerhalb des HTML- oder XML-Dokuments vorgenommen wird, wird die Form der Darstellung aus diesen Dokumententypen herausgenommen und mit CSS durchgeführt. Mit CSS können wichtige Layoutelemente wie Farben, Hintergrund, Schriftarten, Grafiken und die Anordnung der einzelnen Elemente innerhalb der Seite bestimmt werden.

Die Entstehung von CSS

Der Vorschlag, die Layoutelemente von Internetseiten separat zu bestimmen, wurde bereits seit 1993 von verschiedenen Seiten gemacht. Die Grundidee von CSS wurde 1994 von Håkon Wium Lie der Öffentlichkeit vorgestellt. Bert Bos, der zu dieser Zeit einen eigenen Webbrowser entwickelte, der ebenfalls die Idee separater Stylesheets für das Layout der Seite integrieren sollte, war der Meinung, dass Lies Konzept mit seiner eigenen Arbeit gut zusammen passen würde. Daraufhin beschlossen die beiden, zusammenzuarbeiten und begannen gemeinsam mit der Umsetzung der ersten Version von CSS.
Das World Wide Web Consortium, das mit W3C abgekürzt wird, wurde auf die Arbeit der beiden Entwickler in öffentlichen Präsentationen aufmerksam. Das W3C hat die Aufgabe, die Standards für die verschiedenen Protokolle und Sprachen des Internets zu bestimmen. Die Idee ist, dass anhand dieser Richtlinien Webbrowser entwickelt werden sollten und die Gestalter der Internetseiten diese Richtlinien umsetzen, damit sie ordnungsgemäß im Browser dargestellt werden. Obwohl die Einhaltung dieser Richtlinien von den meisten Browserentwicklern und Webdesignern nicht allzu genau genommen wird, so stellen diese Richtlinien dennoch wichtige Wegweiser für die Entwicklungen im Internet dar. Das W3C stufte die Arbeiten von Lie und Bos als zukunftsweisend ein und unterstützte sie. So konnte 1996 die CSS Level 1 Recommendation publiziert werden, in denen die Regeln von CSS detailliert beschrieben werden.
1998 wurde bereits CSS Level 2 veröffentlicht. Doch wurden die neuen Richtlinien von den Webbrowsern nur in kleinen Teilen umgesetzt, so dass die zweite Version kaum Erfolg hatte. Daraufhin begann dass W3C mit der Entwicklung der Version 2.1, die die Probleme der Version 2 beheben sollte und um so für eine weitreichendere Umsetzung zu sorgen. CSS Level 2.1 wurde im Juni 2011 veröffentlicht. Ob diese Version die Probleme der Version 2.0 besser umsetzt und so für eine weitere Verbreitung sorgt, kann zum aktuellen Zeitpunkt noch nicht beurteilt werden.
Parallel zur Entwicklung der 2.1-Version begannen im Jahre 2000 auch die Arbeiten zu einer vollständig neuen CSS-Version. CSS Level 3 ist nach wie vor in der Entwicklung. Diese Version soll sich von seinen Vorgängern insbesondere durch einen modularen Aufbau unterscheiden.

Wozu dient CSS?

Vor der Einführung von CSS wurden alle Layoutelemente im HTML-Dokument selbst bestimmt. Farben, Schriftarten und Schriftgrößen mussten jedes mal aufs Neue eingegeben werden. Dies stellt einen erheblichen Arbeitsaufwand dar, vor allem wenn man bedenkt, dass solche Layoutvorgaben bei größeren Webprojekten teilweise mehrere hundert Mal durchgeführt werden müssen. Mit CSS ist es möglich, diese Auszeichnungen nur ein einziges Mal vorzunehmen. An der entsprechenden Stelle wird dann lediglich auf die Vorgaben des CSS-Dokuments verwiesen. Das kann eine erhebliche Arbeitsvereinfachung bedeuten.
Wenn eine Seite aktualisiert wird, ist dies bei der Verwendung von CSS deutlich einfacher. Wenn der Inhalt aktualisiert wird, muss lediglich der alte durch den neuen Inhalt ersetzt werden. Der Webdesigner muss den Inhalt nicht extra wie in herkömmlichen HTML-Dokumenten formatieren und an das Layout anpassen.
Noch größer ist die Verringerung des Arbeitsaufwands, wenn das Layout einer Seite einheitlich verändert werden soll. Während bei der Gestaltung der Seite in HTML jeder einzelne Tag, der sich auf die Gestaltung der Seite bezieht, ersetzt werden muss, ist das mit CSS mit einigen kurzen Änderungen im Stylesheet getan. Dies bringt nicht nur eine erhebliche Zeitersparnis, sondern hilft auch, Fehler zu vermeiden. Wenn bei einem größeren Projekt mehrere hundert Tags erneuert werden müssen, ist es sehr wahrscheinlich, dass dabei der eine oder andere übersehen wird. So erscheint ein Teil der Seite im neuen Design, während einige Teile noch in der alten Version dargestellt werden. Dies erscheint äußerst unprofessionell.
Doch stellt CSS nicht nur eine Möglichkeit zur Verringerung des Arbeitsaufwands dar, sondern kann die Dokumente auch deutlich besser strukturieren. Durch die Trennung von Form und Inhalt werden die Dokumente deutlich übersichtlicher. Wenn Änderungen anstehen, ist es so einfacher, die betreffenden Stellen innerhalb der Dokumente zu finden.
Ein weiterer Punkt, der für die Verwendung von CSS spricht, ist die erweiterte Funktionalität gegenüber HTML. Wenn eine Seite gestaltet werden soll, die verschiedene Elemente wie Text und Grafiken nicht nur untereinander anordnet, sondern auch nebeneinander, ist dies mit reinem HTML sehr kompliziert. Meistens wird dies mit Tabellen umgesetzt. Dieses Verfahren ist nicht nur kompliziert und schwierig umzusetzen, sondern auch anfällig gegenüber verschiedenen Interpretationen durch unterschiedliche Browser.

Zusammenspiel zwischen CSS und (X)HTML

Um CSS innerhalb eines HTML- oder XHTML-Dokuments zu verwenden, gibt es drei verschiedene Möglichkeiten. Die Vorgaben können in einem separaten Dokument geschrieben werden. Im Head-Bereich des HTML-Dokuments wird dieses erwähnt. Wenn beispielsweise das Dokument mein_stylesheet heißt, muss dieses mit erwähnt werden.
Die zweite Möglichkeit ist es, das komplette CSS-Dokument in den Head-Bereich einzubauen. Mit der Kennzeichnung ist dies möglich. Dabei werden Layoutvorgaben für das gesamte Dokument gemacht.
Die letzte Möglichkeit besteht in der Auszeichnung direkt im HTML-Tag. Soll das Wort "Beispiel" in kleinerer Schriftgröße erscheinen, kann dies mit CSS folgendermaßen umgesetzt werden: Beispiel. Diese Bestimmung gilt dann lediglich innerhalb dieses Tags. Je größer das Projekt ist, desto stärker ist die erste dieser Methoden zu empfehlen. So kann mit einem einzigen CSS-Dokument ein sehr umfangreiches Webprojekt gestaltet werden. Ein externes CSS-Dokument kann für jede einzelne Seite einer Website verwendet werden und spart so viel Arbeitsaufwand. Die zweite Methode kann entweder für Projekte mit nur einer Seite gewählt werden, oder wenn jede einzelne Seite ein eigenes Layout erhält. Die dritte Methode ist nur dann sinnvoll, wenn eine einzelne Passage ein Layout erhalten soll, das sich von allen anderen Elementen des Projekts unterscheidet. Wenn einzelne Objekte mit unteschiedlicher Gestaltung wiederkehren, ist die Auszeichnung von Klassen sinnvoller. Wenn beispielsweise mehrere separate Absätze mit blauem Hintergrund erscheinen sollen kann das mit der Klassenbezeichnung p.blau { background-color: #0066CC } im CSS-Dokument geschehen. Die einzelnen Absätze werden dann mit gekennzeichnet und die Farbe muss nicht jedes Mal aufs neue eingegeben werden."