CSS - Grundlagen
1. Warum Cascading Style Sheets?
Vielleicht erinnert sich der ein oder andere noch an die Zeit, als der Netscape Navigator einen Marktanteil von 90% hatte. Es war die Zeit, als der Mensch in Deutschland gerade den aufrechten Gang im Internet erlernte, also sozusagen im Paläolithikum des Informationszeitalters. Zu dieser Zeit trug es sich zu, dass die Götter des W3C-Konsortiums ihre Gebote den Menschen verkündeten, die da lauteten:
- Du sollst Cascading Style Sheets benutzen
- Du sollst kein
<font>-Tag mehr benutzen - Du sollst keine HTML-Attribute benutzen, die das Aussehen einer Seite beeinflussen
- Du sollst Inhalt und Layout strikt voneinander trennen
Und alle Steinmetze, die bis dato ihre Botschaften in Granit meißeln mussten, jubelten, jauchzten und frohlockten ob der Möglichkeiten, die die neuen Gebote brachten. Leider tanzten die damals mächtigsten Könige Netscape und Microsoft um ihr eigenes goldenes Kalb herum und beteten die Götter "Was kümmern mich Standards" und "Proprietäre Formate" an. Und so geschah es, dass die Steinmetze auch weiterhin mit Hammer und Meißel anstelle von Papier und Feder arbeiten mussten.
Diese Geschichte ereignete sich im Jahre 1996, als das W3C-Konsortium die erste Spezifikation dazu verabschiedete. Zwei Jahre später gab es dann noch eine. Leider waren damals die Browserhersteller nicht Willens/in der Lage, ihre Produkte dem neuen Standard anzupassen. Also musste man sich auch weiterhin mit Layout-Tabellen und diversen HTML-Attributen herumschlagen, um ein halbwegs vernünftiges Design umzusetzen. Der Nachteil lag auf der Hand. Bei optischen Anpassungen musste man sich durch alle Seiten durchwühlen, und an unzähligen Stellen die entsprechenden Änderungen vornehmen, eine echte Sisyphus-Arbeit.
Gottlob haben die Zeiten sich geändert. Wenn man einmal die Dinosaurier-Browser wie zum Beispiel den Navigator 4, Internet Explorer 4/5.x (PC) oder 5.x (Mac) ignoriert, so ist es möglich, das komplette Aussehen eines Internet-Auftritts nur über Style Sheets zu steuern. Sollte sich dann ein alter Auftritt in neuem Gewande präsentieren, so müssen nur noch die CSS-Anweisungen umgeschrieben werden und voilà - fertig.
2. Was sind Cascading Style Sheets?
Übersetzt "Kaskadierende Formatvorlagen". Letzteres kennt ihr vielleicht von MS Word her. Da bekommen bestimmte Elemente automatisch eine entsprechende Formatierung verpasst, oder man legt selber welche fest. Gut, in Word ist das ein wenig unhandlich geregelt, aber darum geht es hier ja nicht.
Also noch mal von vorne und ganz langsam. Mit CSS weist man HTML-Elementen ein bestimmtes Aussehen zu. Das geschieht nach einem vorgegebenen Regelkatalog, der sich Spezifikation nennt und in mehreren Versionen vorliegt. Allerdings braucht ihr keine Angst davor zu haben. Das Grundprinzip von CSS ist, abgesehen von einigen wenigen Ausnahmen, sehr einfach gehalten und leicht zu verstehen. Die Feinheiten lernt man dann im Laufe der Zeit kennen.
Die Kaskadierung
Gemeinhin versteht man unter einer Kaskade einen künstlichen oder natürlichen Wasserfall. Dabei plätschert dann das Wasser über mehrere Stufen seinem Ziel entgegen. Bei CSS bedeutet das, einfach gesagt, dass mehrere Ebenen durchlaufen werden, bevor die eigentliche Darstellung im Browser erfolgt. Die Details dazu kommen (mal wieder) später.
3. Die Spezifikationen
Derzeit gibt es drei davon.
- CSS 1.0
- CSS 2.0
- CSS 2.1
Im Gegensatz zu HTML muss man sich hier keine große Gedanken darüber machen, für welche Version man sich entscheidet. Der aktuelle Stand 2.1 wird von allen modernen Browsern unterstützt. Und für die alte Schrömmelgurke namens Internet Explorerer 6 gibt es entsprechende Pfuschmöglichkeiten. Das gilt übrigens auch für die andere Missgeburt in der Version 7.0. Die Details dazu erfahrt ihr bei den Tutorials.
4. Die Zukunft
Derzeit ist die Spezifikation für CSS 3 in Arbeit. Das wird wohl aber noch ein Weilchen dauern. Außerdem kann man die eh erst dann produktiv einsetzen, wenn die beiden oben erwähnten Krüppelbrowser das Zeitliche gesegnet haben. Macht euch also noch keine großen Gedanken darüber (analog zu HTML 5).