Im letzten Artikel habe ich eine kurze Einführung darüber gegeben, wie mit Hilfe der Auszeichnungssprache HTML auf einfache Weise Websites im Internet beschrieben werden können. Gleichzeitig hatte ich jedoch auch angemerkt, dass HTML vor allem dazu geeignet ist, die Struktur der Inhalte zu definieren, nicht aber unbedingt deren optisches Erscheinungsbild (sprich die Textformatierung). Zu diesem Zweck wurden die Cascading Style Sheets – kurz CSS – entwickelt, eine Art Programmiersprache zur Beschreibung von Formatierungsangaben; und um die soll es heute gehen.
Vorab noch eine kleine Anmerkung für all die Webgurus da draußen: das hier soll keine Anleitung dafür sein, wie man CSS bei der Erstellung von Websites möglichst effektiv und “gut” benutzt – es ist lediglich eine Einführung in das Thema an sich für alle Interessierten, die einfach einmal wissen möchten, wie denn ein Browser überhaupt weiß, was er darstellen soll. So, jetzt geht es aber los.
Noch einmal kurz zur Erinnerung: Mit Hilfe von HTML-Tags kann der Text in einem HTML-Dokument strukturiert werden; der folgende Codeausschnitt markiert etwa einen Absatz:
Möchte man den Text im Absatz nun formatieren, also sein Erscheinungsbild ändern, so kann das durchaus auch mit Mitteln von HTML allein erreicht werden. Um den Text etwa fett, kursiv und in roter Schrift anzuzeigen, könnte man etwa folgendes schreiben:
Dies ist ein Absatz.
</font></i></b></p>
Das würde dann zu folgendem Ergebnis führen, wobei das <b> den Fettdruck (für bold), das <i> den Kursivdruck (für italic) und das <font color=”#FF0000″> den Druck in roter Farbe markiert:
Dies ist ein Absatz.
Jetzt werden alle Leser sicherlich zustimmen, wenn ich sage, dass eine derartige Notation eher umständlich ist und insbesondere bei verschiedenen gleichzeitig anzuwendenden Formatierungen zu einer starken Schachtelung des Codes führt und damit dessen Lesbarkeit nicht gerade zuträglich ist. Zum Glück gibt es aber CSS, welches eine bedeutend einfachere Formatierung erlaubt.
Die Grundidee hinter CSS ist, dass mit Hilfe einer speziellen deklarativen, also beschreibenden Programmiersprache die Formatierungsanweisungen für einen Textbestandteil effizient aufzuschreiben und durch den Browser dann anwenden zu lassen. Die Zuordnung von einem derartigen CSS-Fragment zu einem Textbestandteil kann dabei entweder lokal erfolgen, das heißt, dass ein bestimmtes Textelement – zum Beispiel ein Absatz – direkt mit CSS-Code versehen wird; oder aber – und hier liegt der eigentliche Charme von CSS – die Zuordnung erfolgt global, so dass alle Textbestandteile, die einem bestimmten Muster folgen, mit einer vorgegebenen Formatierung versehen werden. Wie das funktioniert, schauen wir uns jetzt im Detail an.
Fangen wir mit der lokalen Zuordnung an. Wie bereits im letzten Artikel gesehen, können HTML-Tags mit Eigenschaften versehen werden, etwa wenn das Ziel eines Hyperlinks angegeben werden soll (wer sich nicht mehr erinnert, schaue bitte noch einmal im Artikel nach). Eine dieser Eigenschaften, die an alle HTML-Tags angehängt werden kann, ist die style-Eigenschaft. Ihr kann als Wert eine Zeichenkette übergeben werden, welche nach CSS-Vorgaben aufgebaut ist und den gewünschten Stil, also die Formatierung beschreibt. Obiges HTML-Monster kann also mit Hilfe der
style-Eigenschaft folgendermaßen umformuliert werden (die Interpretation der einzelnen Bestandteile überlasse ich dem Leser; es sollte nicht allzu schwierig sein):
Dies ist ein Absatz.
</p>
Zugegeben, das sieht jetzt nicht wirklich besser aus als die HTML-Variante; insbesondere die erste Zeile erscheint doch sehr umständlich. Dennoch hat diese Notation zwei Vorteile. Zum einen können innerhalb der style-Eigenschaft viele verschiedene Angaben gemacht werden, für die man ohne CSS jeweils ein eigenes Tag benötigen würde (womit die Anzahl der Tags auf Grund der vielen verschiedenen Formationsmöglichkeiten ziemlich schnell ziemlich groß werden würde). Zum anderen ist die Verschachtelungstiefe der CSS-Variante bedeutend geringer als die der HTML-Variante; in der HTML-Variante sind insgesamt 5 Elemente (inklusive des eigentlichen Textes) ineinander verschachtelt, die CSS-Variante kommt mit 2 Elementen aus. Dadurch sinkt die Komplexität des Dokumentes und damit natürlich auch die Möglichkeit, Fehler zu machen.
Der eigentliche Vorteil von CSS kommt aber dann zum Tragen, wenn in einem Text mehrere Elemente auf die gleiche Art formatiert werden sollen. Ohne CSS oder mit CSS in der ausschließlich lokalen Variante müssten die Formatierungsanweisungen an jedes gewünschte Textelement neu angefügt werden – eine umständliche Aufgabe. Soll zu einem späteren Zeitpunkt die Formatierung geändert werden, hat man noch mehr Arbeit, da der HTML-Code an vielen Stellen modifiziert werden muss. Um diese Probleme zu umgehen, können CSS-Formatierungsanweisungen auch global, also an einer zentralen Stelle notiert werden; dies kann entweder im HTML-Dokument selbst erfolgen oder aber in einem eigenen Dokument, welches über eine spezielle Anweisung mit dem zu formatierenden HTML-Dokument verknüpft wird.
Die Einbettung in das HTML-Dokument selber kann im Kopf des Dokumentes mit Hilfe des style-Tags (in Analogie zur style-Eigenschaft) erfolgen, in welchem der CSS-Code notiert wird. Der CSS-Code besteht dabei aus einer Folge von Namen für Textbausteinen (also zum Beispiel das p für Absätze oder h1 für Überschriften auf oberster Ebene) mit einer zugeordneten Formatierung. Die Beispiel-Formatierung von oben könnte also folgendermaßen notiert werden (diesmal das komplette HTML-Dokument):
<head>
<style type=”text/css”>
p { font-weight : bold;font-style : italic; color:red; }
</style>
</head>
<body>
<p>Dies ist ein Absatz.</p>
<p>
Dieser Absatz hat die gleiche Formatierung.
</p>
</body>
</html>
Das resultierende Dokument würde dann so aussehen:
Dies ist ein Absatz.
Dieser Absatz hat die gleiche Formatierung.
Man kann also mit einer einzigen Formatierungs-Anweisung problemlos mehrere Textbausteine formatieren – praktisch! Jetzt möchte man allerdings natürlich nicht, dass immer alle Textbausteine einer Art auf eine bestimmte Art formatiert werden; immerhin gibt es nur einen Baustein für Absätze (für pingelige: gut, zwei mit dem div-Element) und man möchte unter Umständen eben nicht alle Absätze gleich formatieren. Zu diesem Zweck erlaubt CSS auch die Definition von Klassen, mit deren Hilfe die Formatierung von Textelementen eingeschränkt werden kann, da nur diejenigen Elemente formatiert werden, die einer bestimmten Klasse entsprechen. Klingt kompliziert? Hier ein Beispiel:
<head>
<style type=”text/css”>
p.mark { font-weight : bold;font-style : italic; color:red; }
</style>
</head>
<body>
<p class=”mark”>Dies ist ein Absatz.</p>
<p>
Dieser Absatz ist nicht formatiert.
</p>
</body>
</html>
Die Klasse hier heißt mark und die Notation p,mark bedeutet, dass nur Absätze der Klasse mark (markiert durch <p class=”mark”>) formatiert werden. Das Ergebnis sieht entsprechend so aus:
Dies ist ein Absatz.
Dieser Absatz ist nicht formatiert.
Da eine Website naturgemäß aus mehreren Webpages besteht (die Website bezeichnet den gesamten Internetauftritt, zum Beispiel Scienceblogs im Allgemeinen, und Webpage oder Internetseite/Webseite bezeichnet ein einzelnes Dokument, etwa diesen Artikel hier – das wird gern verwechselt), die alle der gleichen Formatierung folgen sollen, ist es gemeinhin sinnvoll, die CSS-Definitionen in eine externe Datei auszulagern und in allen Webpages einer Website einzubinden. Statt also im Kopf einer Webpage die CSS-Formatierungsanweisungen zu notieren, schreibt man sie in eine externe Datei – zum Beispiel format.css und bindet diese dann über folgenden Code ein:
<head>
<link rel=”stylesheet” type=”text/css” href=”format.css” />
</head>
<body>
<p class=”mark”>Dies ist ein Absatz.</p>
<p>
Dieser Absatz ist nicht formatiert.
</p>
</body>
</html>
Jede Änderung an der CSS-Datei hat jetzt zur Folge, dass automatisch alle Webpages, welche die CSS-Datei benutzen, neu formatiert werden – eine praktische Möglichkeit, um einerseits alle Webpages einer Website in einem einheitlichen Design zu halten und andererseits Änderungen am Design schnell und vor allem sicher in alle Webpages zu propagieren. Durch einen Austausch der CSS-Datei ist es zudem möglich, temporär ein anderes Design für eine Website einzuführen – wenn etwa zur Weihnachtszeit alles hübsch festlich dargestellt werden soll; danach kann die originale CSS-Datei wieder verwendet und somit das originale Design ohne Umstände wiederhergestellt werden. CSS ist de facto auch der Standard bei der Formatierung von Websites – kaum ein Webentwickler wird daran vorbeikommen (für die Kenner: abgesehen von den Entwicklern von Flash-Sites natürlich).
Damit haben wir die Grundlagen der Webentwicklung geklärt. Wer sich jetzt bemüßigt fühlen sollte, eigene Erfahrungen in diesem Bereich zu sammeln: die Website selfhtml.org ist ein guter Einstiegspunkt dafür, da sie einen guten Überblick über die möglichen HTML-Tags und CSS-Elemente bietet.
Update
Leser Andreas P. hat mich auf eine schöne Site im Internet aufmerksam gemacht, welche einen großen Vorteil von CSS, nämlich den schnellen Austausch des Designs einer Website, besonders hervorhebt. Interessierte klicken bitte hier.
Kommentare (22)