Während die meisten Internet-Surfer schon einmal etwas von HTML gehört haben, klingt CSS wie eine Abkürzung aus dem Computer-Jargon für Profis, vor allem wenn man die Abkürzung ausschreibt: Cascading Style Sheets - was für eine Bezeichnung! Auch zahlreiche Homepage-Bastler haben schon von CSS gehört und unbewusst auch schon das eine oder andere Element daraus verwendet, aber so richtig klar ist den wenigsten, was CSS eigentlich sind, wofür sie geschaffen wurden und wie man sie richtig einsetzt.

Fakt ist, dass alle größeren, professionellen Webseiten CSS einsetzen und dass man auch bei einer privaten Homepage ab einer bestimmten Größe ohne CSS kaum noch auskommt. Im Folgenden möchte ich Homepage-Erstellern, die schon mit HTML vertraut sind, CSS näher bringen, ohne auf jeden einzelnen Befehl einzugehen. Absolute Web-Neulinge können in den ersten Kapiteln eine Menge Grundwissen erlernen, sollten aber vor der Anwendung zuerst die Einführung in HTML lesen.

Ich werde die wichtigsten, gebräuchlichsten Befehle erklären, zeigen, auf welche verschiedenen Arten man CSS einsetzen kann und vor allem auch erklären, wozu CSS eigentlich geschaffen wurde und für welchen Einsatz genau sie gedacht sind.

Die Grenzen von HTML

Hast Du meine Einführung in HTML durchgearbeitet oder selbst schon Webseiten in HTML erstellt? Die meisten Webseiten-Ersteller verwenden die einfache HTML-Sprache ohne genau zu wissen, was eigentlich hinter der Sprache steckt. Dass HTML eine einfache, leicht und schnell erlernbare Sprache ist, habe ich in meiner Einführung zu HTML gezeigt.

So schnell man HTML erlernt so schnell stößt man auch an die Grenzen der Sprache, nämlich dann, wenn man sich um das detailliertere Layout einer Seite kümmert. Es ist einerseits zwar faszinierend, wenn man mit wenigen HTML-Tags schnell eine optisch ansprechende Webseite erstellen kann, andererseits aber frustrierend, wenn man nicht einmal bestimmen kann, wie groß nun tatsächlich eine Überschrift sein oder welchen Zeilenabstand normaler Fließtext haben soll.

Leicht wird die Schuld auf die primitive Sprache HTML geschoben: Da gibt es ja noch viel zu verbessern. Dabei wird völlig vergessen, dass HTML gar nicht geschaffen wurde, um sich um das Seitenlayout zu kümmern, um Schriftgrößen oder Zeilenabstände festzulegen. Ein kurzer Rückblick:

Heute gibt es auf meiner Homepage eine Seite mit Informationen zum Thema Geld Anlegen. Im Jahre 1990, als es noch keine Webbrowser gab, wie wir sie heute alle selbstverständlich benutzen, hätte ich dieselben Informationen auch übers Internet zur Verfügung stellen können, allerdings in viel einfacherer Form (Ausschnitt aus der heutigen Seite). Informationen wurden in Form von ASCII-Dateien weitergereicht.

HTML wurde als Seitenbeschreibungssprache entwickelt, die eine Seite in Überschriften, Absätze, Tabellen oder Listen gliedert. Wie eine Überschrift, ein Absatz, eine Tabelle oder eine Liste auszusehen hat, das sollte in fairer Arbeitsteilung der Webbrowser auf jedem beliebigen Rechner individuell bestimmen. HTML zeichnet also den Inhalt einer Seite aus, der Webbrowser kümmert sich um das Layout. Mit einfachem HTML sieht die primitive ASCII-Seite plötzlich so aus.

Damit ist eigentlich das Ziel von HTML erreicht: Seiten werden mit einer plattformunabhängigen Sprache ausgezeichnet, Bilder können eingebunden werden, Links zu anderen Seiten können hergestellt werden und um das Layout kümmert sich der Internet-Browser mit defaultmäßigen Einstellungen. Erst im Laufe der Jahre kam bei den Webseiten-Erstellern immer mehr der Wunsch auf, selbst das Layout der Seite zu bestimmen und diese Arbeit nicht alleine dem Browser zu überlassen.

Da HTML jedoch keine Layout-Sprache ist, wurde getrickst und gezaubert: Verschachtelte Tabellen wurden zum Erzwingen eines bestimmten Seitenlayouts missbraucht, unsichtbare Grafiken wurden zum Erzwigen von Leerräumen und Abständen eingesetzt u.s.w. Im Jahre 1995 kam das <font> Tag hinzu, mit dem man immerhin die Schriftart, Schriftfarbe oder die relative Schriftgröße festlegen konnte. Aber eine echte Lösung brachten erst die Cascading Style Sheets.

Was sind Cascading Style Sheets?

CSS ist eine offizielle Ergänzungssprache zu HTML, die sich direkt und leicht in HTML integrieren lässt. Mit CSS kann ein direkter Einfluss auf das Layout einer Seite und die Formatierung einzelner HTML-Elemente genommen werden. Während bei gewöhnlichem HTML die Defaulteinstellungen des Browser bestimmen, wie z.B. eine Überschrift <h1> auszusehen hat, können diese Defaulteinstellungen in den Style Sheets überschrieben werden.

Wird damit die konsequente Trennung von Seiteninhalt bzw. Seitenauszeichnung und Layout aufgegeben? Nein, im Gegenteil: Während mit dem <font> Tag eine Vermischung von Auszeichnung und Formatierung geschaffen wurde, erfolgt mit dem Einsatz von CSS eine absolut saubere Trennung zwischen Inhalt (HTML) und Formatierung (CSS) einer Seite. Auf einer professionellen Internet-Seite wird also der Seiteninhalt in HTML festgelegt während das Layout und die Formatierung mit Hilfe von Style Sheets vorgenommen wird.

Jetzt stellt sich natürlich die Frage, ob der Einsatz von CSS nicht zu individuellen Formatierungen führt, so dass eine Webseite plötzlich nicht mehr auf verschiedenen Rechnern gleich dargestellt werden kann. Nehmen wir einen alten Rechner her, dessen etwas älterer Browser gar keine Style Sheets versteht. Derjenige ignoriert dann einfach die CSS-Formatierungen und stellt die Seite mit dem ja trotzdem vorhandenen HTML dar. Natürlich ist die Seite dann nicht so schön und effektvoll, aber die Inhalte werden dargestellt, und darauf kommt es schließlich an.

CSS wird übrigens vom W3 Consortium standardisiert. CSS ist eine Ergänzungssprache zu HTML, jedoch keine Programmiersprache. In einem Style Sheet können keine Schleifen oder Bedingungen eingesetzt werden. Ein Style Sheet enthält nur eine Liste unterschiedlicher Stile hintereinander gereiht.

Was ist mit Cascading Style Sheets alles möglich?

Wie bereits erwähnt, mit CSS können HTML-Elemente wie die Überschrift <h1> oder ein Textabsatz <p> individuell formatiert werden. Die Festlegung der Schriftart, Schriftgröße, Schriftfarbe oder des Zeilenabstandes sind nur ein Bruchteil der möglichen Formatierungen. Was Text betrifft können mit CSS im Prinzip alle Formatierungen durchgeführt werden, die man von einem Textverarbeitungsprogramm wie Word gewohnt ist. Die vielfältigsten Formatierungen können jedoch auch für Tabellen, Listen, Bilder oder die Gesamtseite festgelegt werden.

Mit CSS können einzelne Textabschnitte individuell formatiert werden, es können jedoch auch feste Vorgaben für eine ganze Webseite gemacht werden. So richtig attraktiv werden Style Sheets jedoch erst, wenn man mit ihnen das Layout eines gesamten Webprojektes bestimmt. Meine Webseite besteht aus Hunderten von Einzelseiten. Um die Hintergrundfarbe oder die Standardschriftart zu ändern brauche ich nur eine Zeile in einem zentralen Style Sheet abzuändern. Mit nur einer Änderung im zentralen Style Sheet sehen plötzlich auch all meine Tabellen ganz anders aus.

All diese Features kennt man von Textverarbeitungsprogrammen wie Word bereits. In Textverarbeitungsprogrammen ist es auch möglich, in einem riesigen Text gewisse Teile, z.B. Zusammenfassungen, mit Hilfe von Dokumentvorlagen immer gleich zu formatieren. Auch das ist mit CSS möglich: Man kann den normalen Textabsatz <p> z.B. in mehrere Klassen einteilen und diese individuell formatieren, also z.B. eine Klasse namens NormalText und eine andere namens WichtigText erstellen.

Die Möglichkeiten gehen sogar so weit, dass man festlegen kann, dass der erste Absatz nach einer Unterüberschrift anders dargestellt wird wie alle anderen. Und noch einen Schritt weiter geht man mit CSS, indem man verschiedene Formatierungen für verschiedene Ausgabemedien festlegt. So kann man unterschiedliche Stile definieren je nachdem ob eine Seite am Bildschirm dargestellt wird, auf einem Schwarz-Weiß-Drucker ausgegeben wird oder gar auf einem WAP-Handy angezeigt wird.

Aber CSS kann noch vieles mehr: Elemente können frei auf der Seite platziert werden, übereinander, untereinander, nebeneinander u.s.w. Hast Du schon einmal dynamische Menüs auf einer Webseite gesehen oder gar Elemente, die quer über die Webseite flogen? Auch dabei spielt CSS eine Rolle: Mit Hilfe von JavaScript ist es nämlich möglich, die Style-Eigenschaften von HTML-Elementen, also z.B. die absolute Position oder die Farbe, zu verändern.

Zurück zum Inhaltsverzeichnis CSS-Style-Sheets