#Über die Gestaltung von Websites mit Hilfe von CSS – Von Bits und Bytes

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:

<p>Dies ist ein Absatz.</p>

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:

<p><b><i><font color=”#FF0000″>
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):

<p style=”font-weight:bold; font-style:italic; color:red;”>
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.