Zaubern mit CSS

Zu Beginn der 90er Jahre sollte HTML nichts anderes tun, als Text darzustellen und zu verlinken. Die Layout-Funktionen kamen erst später auf Druck der Industrie hinzu. Die Folgen sieht man noch heute: Ellenlange Tabellenkolonnen und überdimensionierte Schriftartendefinitionen. Um einen Text von 100 Zeichen zu layouten, benötigt man etwa die doppelte Menge an HTML-Code.

Um das Problem in den Griff zu bekommen, gab das World Wide Web Consortium (W3C)[1] 1996 die erste Version von CSS frei. CSS kann für jedes HTML-Element, zum Beispiel für einen einzelnen Buchstaben, ein eigenes Layout definieren. Es verändert die Größe des Elements, entwirft einen Rahmen und fügt Abstände hinzu. Hier geht es um die aktuelle Version 2.1, HTML-Kenntnisse setzt der Artikel voraus (Infos zu HTML lesen Sie im Artikel ab Seite 28). Da der Text einen breiten Überblick zu CSS gibt, finden Sie hier nicht sämtliche verfügbaren CSS-Eigenschaften. Das kostenlose Internet-Tutorial SELFHTML und verschiedene CSS-Bücher helfen Ihnen in dieser Frage weiter [2,3,4].

Arbeit sparen, Zeit sparen

Um CSS zu schreiben, benötigen Sie eigentlich nur einen gewöhnlichen Text-Editor. Der KDE-Editor Kate prüft gleich automatisch, ob Sie die Syntax korrekt umgesetzt haben. Notwendig ist das nicht, aber ein nettes Feature – zumal CSS, im Gegensatz zu HTML, bei Syntaxfehlern den Dienst verweigert. Programmierkenntnisse brauchen Sie nicht.

Die Vorteile von CSS verdeutlichen zunächst ein paar Beispiele. Angenommen Sie haben eine HTML-Seite mit einigen Links, deren Farbe Sie im $body§-Tag definieren.

$body link="#000000" alink="↩
#CCCCCC" vlink="#666666"§

Da Sie die Farbe eines einzelnen Links in HTML nicht ändern können, werden sämtliche Links in diesen Farben dargestellt. Mit CSS manipulieren Sie auch einzelne Links ganz unproblematisch:

$a href="http://www.linuxuse↩
r.de" style="color: white; text-↩
decoration: none;"§

Das style-Element beinhaltet die Layout-Eigenschaften für den Link. Der ist nun weiß (color: white;) und nicht mehr unterstrichen (text-decoration: none). CSS kann also Dinge, die HTML nicht kann.

Ein anderes Problem: Sie haben mehrere Seiten Text, der mit Zitaten (blockquote) gespickt ist. Nun wollen Sie die Schriftarten der Zitate ändern. Gewöhnlich öffnen Sie dazu alle HTML-Seiten und nehmen die Änderungen über Suchen und Ersetzen vor. Diese Methode ist nicht besonders effizient. In CSS genügt es, eine Zeile in der zentralen CSS-Datei zu modifizieren.

blockquote {font-family: ↩
Arial, Helvetica, Courier;}

Alle HTML-Dateien, in die das zentrale Style Sheet eingebunden ist, verwenden nun automatisch eine der drei Schriftarten für Zitate. CSS erspart Ihnen in diesem Fall eine Menge Handarbeit. Zugleich erhalten Sie ein Werkzeug, um das Aussehen wiederkehrender Elemente zentral zu definieren und zu ändern. Schließlich dient CSS auch dazu, eine Web-Seite für andere Ausgabemedien zu optimieren. Sie erstellen einfach ein alternatives Style Sheet, das die HTML-Seiten für den Druck optimiert. Sobald ein Nutzer eine Seite ausdrucken möchte, wird das Style Sheet aktiv und entfernt die Menüs und Bilder aus dem Text, vergrößert die Schrift oder ändert die Schriftart.

Was Sie layouttechnisch mit einer gewöhnlichen HTML-Seite anstellen können, beweist eindrucksvoll die Seite Csszengarden [5]. Hier entwerfen Besucher ihre eigenen Style Sheets für ein vorgefertigtes HTML-Dokument. Die Ergebnisse sind verblüffend und zeigen, was mit CSS grafisch möglich ist. Die Funktionalität von CSS 2.1 schöpfen jedoch nur die aktuellen Browser aus. Eine ausführliche Tabelle [6] im Internet listet auf, welche Browser welche CSS-Eigenschaften unterstützen. Das hilft dabei, Ihre Web-Seite auch älteren Browsern zugänglich zu machen.

Rein oder Raus?

Wie aber bauen Sie die Stildefinitionen in Ihren HTML-Code ein? Dafür gibt es drei Möglichkeiten. Eine davon kennen Sie schon: Sie integrieren die Definitionen direkt in die Tags im HTML-Quelltext.

$A href="www.linuxuser.de"↩
 style="color: #FFFFFF; text-↩
 decoration: none;"§ Das ↩
 ist ein Link $/A§

Das Element style kündigt an, dass nun CSS-Code folgt. Die Eigenschaften setzen Sie in Anführungsstriche und trennen Sie durch Semikolons voneinander. Eine zweite Möglichkeit besteht darin, das Layout einer HTML-Seite innerhalb von $style§-Tags zu definieren, die im Header der Seite stehen.

        $head§
                $title§
                        Meine Web-Seite
                $/title§
                        $style type=↩
                        "text/css"§
                        h1 {color: red;}
                        $/style§
        $/head§

Die dritte Methode sieht vor, die Style Sheets in eine eigene Datei auszulagern. Das hat den Vorteil, dass Sie die Style Sheets über einen einzigen Link in die Header der HTML-Seiten einbinden. Dadurch erhalten sämtliche HTML-Seiten ihre Layout-Informationen aus einer einzigen Datei, hier trägt sie den Namen sheet1.css.

        $head§
        $link rel="stylesheet" ↩
type="text/css" href="sheet1.↩
css" title="test" media="↩
screen"§
        $/head§

Um das Aussehen der Web-Seiten zu verändern, müssen Sie nicht jede HTML-Datei einzeln öffnen, sondern modifizieren einfach die eingebundene CSS-Datei.