CSS - Cascading Style Sheets

Bei der Entwicklung von Websites verwendet man nicht nur HTML als Beschreibungssprache für elektronische Dokumente, sondern auch CSS. Das ist die Abkürzung für Cascading Style Sheets und heißt übersetzt in etwa Kaskadierende Stil-Vorlagen. Es wird hauptsächlich eingesetzt, um das Aussehen der Website und der enthaltenen Elemente festzulegen. Auf dieser Webseite des CSS-Tutorials soll zunächst die Grundidee und einige generelle Themen erläutert werden. Die Syntax, Einbindung, Zuweisung von Eigenschaften und Werten werden auf den Folgeseiten unterhalb dieses Knotens erläutert.

Die Grundidee dahinter ist, dass man das Design und die Inhalte einer Website voneinander trennt. In der Anfangszeit des Internets wurden nämlich die Inhalte meistens nicht vom Design getrennt. Beispielsweise wurde die Formatierung der Texte dadurch erreicht, indem man die notwendigen Befehle direkt in HTML einfügte. Die Folge war ein erhöhter Aufwand bei Änderungen. Dazu ein Beispielcode, wie man es nicht (mehr) macht.

In diesem Beispiel wurde mit dem FONT-Tag die Schriftgröße für den Absatz festgelegt. Das funktioniert zwar und wird in den Browsern entsprechend dargestellt. Jedoch hat diese Variante erhebliche Nachteile. Man stelle sich vor, man hat mehrere Hundert Seiten, die alle an verschiedenen Stellen mit Codes versehen worden sind, die für das Design relevant sind. Websites unterliegen immer wieder gewissen Änderungen und müssen aktualisiert werden. Bei Websites, in denen die Elemente direkt mit HTML-Code gestaltet wurden, müsste man bei einer Aktualisierung alle Seiten bearbeiten und die entsprechenden Codezeilen ändern. Das birgt neben einem erhöhten Zeitaufwand die Gefahr, dass sich Fehler einschleichen.

Daneben hat die Gestaltung einer Website auf diese Art den Nachteil, dass der Quellcode unnötig aufgebläht wird. Für auslesende Maschinen wie z.B. Suchmaschinenbots ist es unerheblich, ob ein Text in einer bestimmten Farbe oder Größe dargestellt wird. Primär ist das Ziel von Suchmaschinen, die Struktur und den Inhalt einer Website zu ermitteln. Diese würden den Code mitsamt den Bestandteilen für das Design auslesen, den sie eigentlich nicht benötigen.

Außerdem hat man mit HTML allein nicht den Gestaltungsspielraum wie mit CSS. Denn, die Sprache CSS ist sehr mächtig und bietet den Entwicklern enorme gestalterische Möglichkeiten, die man allein mit HTML sonst nicht hätte. Trennt man das Design und den Inhalt und verwendet für die Gestaltung der Elemente lediglich CSS, hat man als Entwickler ein gutes Werkzeug in der Hand, um strukturiert an die Aufgabe heranzugehen. Bezogen auf das Beispielcode könnte man z.B. im HEAD-Bereich mit dem STYLE-Tag die Stile definieren und den FONT-Tag im Absatz weglassen.

Mit diesem Code im HEAD-Bereich würde allen P-Tags eine Schriftgröße von 14px zugewiesen werden. Diese bräuchte man nicht mehr mit dem FONT-Tag ausstatten und der folgende Code würde völlig ausreichen.

Egal wie häufig der P-Tag auf der Seite vorkommt. Durch die Stildefinition im HEAD-Bereich würden alle Absätze mit der Schriftgröße dargestellt werden. Wenn man die Schriftgröße ändern wollte, bräuchte man nur die Zeile im HEAD-Bereich zu ändern und die Änderung würde automatisch auf alle P-Tags der Webseite angewendet werden. So hätte man das Design und den Inhalt der Seite zumindest auf der Seitenebene klar voneinander getrennt.

Die Zuweisung kann jedoch weiter verbessert werden, sodass man bei Aktualisierung noch weniger Arbeit hat. Denn, würde man die Stildefinitionen immer im HEAD-Bereich der Seiten einfügen, so müsste man bei einer Änderung zwar nicht mehr den Code bei den Elementen ändern, jedoch im HEAD-Bereich der Seiten. Damit das auch entfällt, trägt man die Stildefinitionen nicht mehr direkt im HEAD-Bereich ein, sondern lagert sie in eine CSS-Datei aus. Im HEAD-Bereich würde dann lediglich ein Verweis auf die CSS-Datei erfolgen. Ein Beispielcode.

Bei dieser Variante bräuchte man bei einer Aktualisierung die HTML-Seiten überhaupt nicht mehr bearbeiten. Man würde nur noch eine einzige CSS-Datei bearbeiten und dadurch das Aussehen aller Seiten ändern, in denen die CSS-Datei eingebunden wurde. Die CSS-Datei dient somit als "Zentrale" für das Design aller Seiten einer Internetpräsenz. Aktualisierungen des Designs einer Website würden wesentlich schneller vonstatten gehen und die Suchmaschinen würden keinen unnötig aufgeblähten HTML-Code erhalten. Daher sollte man das Design einer Website soweit es geht über eingebundene CSS-Dateien gestalten.

Mit Kaskadierung der Stile ist gemeint, dass man einem Element über mehrere Stufen (Kaskaden) unterschiedliche Stile zuweisen kann. Somit stehen sie in einem gewissen Konflikt zueinander und es gibt Regeln, welcher Stil bei einem Konflikt angewendet wird. Dazu ein Beispiel CSS-Code.

In diesem Beispiel wurde dem BODY-Tag eine Schriftgröße von 16px vorgegeben. Das bedeutet, die Texte darin erben, mit einigen Ausnahmen, automatisch diese Schriftgröße. Auch Absätze (P-Tag) würden normalerweise mit dieser Schriftgröße dargestellt werden. In diesem Beispiel wurde jedoch auch dem P-Tag eine Schriftgröße zugewiesen, nämlich 14px. Somit stehen die Stile für den BODY- und P-Tag in einem Konflikt zueinander. Die Konflikte können verstärkt werden, wenn man z.B. nicht nur eine CSS-Datei einbindet, sondern mehrere. So ist es durchaus üblich, dass einem Element über verschiedene Kaskaden sehr viele Stile zugewiesen werden, die in einem Konflikt zueinander stehen. Es gibt jedoch gewisse Regeln, mit denen festgelegt wird, welche Stile zur Anwendung kommen.

CSS wurde im Laufe der Zeit ständig weiterentwickelt. Die CSS-Spezifikationen wurden für folgende Versionen veröffentlicht.

• CSS 1.0
• CSS 2.0
• CSS 2.1

CSS3 ist laut dem Stand von 06/2015 immer noch in Arbeit. Zwischenzeitlich wurden Gerüchte verbreitet, dass die Gruppe "CSS Working Group" (CSS WG), die sich mit der Entwicklung von CSS beschäftigt, an einer CSS4-Version arbeiten soll. Das wurde von der Gruppe jedoch dementiert und es wurde gesagt, dass es nie eine CSS4 geben wird. CSS3 soll demnach die endgültige Version sein, wobei man sich auf solche Aussagen nie zu 100% verlassen kann. Denn, vor vielen Jahren wurde behauptet, dass HTML 4.01 die letzte HTML-Version ist und man nur noch an der Entwicklung von XHTML arbeiten werde. Wie man nun weiß, hat man die Entwicklung von XHTML irgendwann aufgegeben und wieder damit begonnen, mit HTML5 die Weiterentwicklung der ursprünglich aufgegebenen Sprache voranzutreiben.

Nicht alle CSS-Angaben werden von den Browsern umgesetzt. Es kann auch passieren, dass einige Browser die CSS-Angaben zwar umsetzen, jedoch nicht so, wie sie in den Spezifikationen eigentlich vorgesehen sind. Eine effektive Art, mit CSS zu arbeiten ist, sich auf die Versionen der verschiedenen Browser zu konzentrieren, die zusammen einen Marktanteil von über 95% haben. Die verwendeten CSS-Stile sollten von diesen Browsern unterstützt werden. Neuere CSS-Angaben können zwar auch verwendet werden. Man sollte aber darauf achten, dass dadurch bei den Browsern das Design nicht zerstört wird.