CSS-Praxisbuch

1 CSS Grundlagen (S. 33-34)

CSS zu lernen íst im Prinzip nicht sonderlich schwer. Es geht dabei im Wesentlichen darum, dass Sie wissen, wie und zu welchen Zwecken Sie CSS einsetzen und wie CSS-Anweisungen syntaktisch aufgebaut werden. Was daneben noch fehlt, sind die einzelnen CSS-Eigenschaften und ihre möglichen Werte. Die brauchen Sie jedoch nicht zu lernen, dafür finden Sie in diesem Buch einen ausführlichen Referenzteil, die Referenzkarte und eine Übersicht im Anhang.

1.1 Was ist CSS?

CSS ist die Abkürzung für Cascading Style Sheets. Wörtlich übersetzt bedeutet dies »kaskadierende Stilblätter«, was natürlich etwas unpassend ist. Besser lässt es sich mit »vererbbare Formatvorlage« oder »vererbbare Stile« übersetzen. Aber was genau steckt dahinter?

Bei CSS handelt es sich um eine Sammlung von Eigenschaften, Werten und Syntaxregeln, die dazu dienen, Webseiten zu formatieren. Die Webseite kann als XHTML-Seite oder HTML-Seite vorliegen. Für CSS spielt das eine untergeordnete Rolle. CSS ohne (X)HTML macht keinen Sinn, da CSS selbst nicht dargestellt werden kann. Sie müssen sich CSS mehr wie eine Farbpalette für Ihre Webseite vorstellen, die ohne die angemalten Flächen natürlich auch keinen Sinn macht.

CSS-Code wird in der HTML-Seite direkt oder in einer externen Textdatei gespeichert und dann auf die Elemente der HTML-Seite angewendet. Die Gesamtheit der definierten Stile wird als Stylesheet bezeichnet.

Die definierten Stile in einem CSS-Stylesheet bestehen aus einem Namen und den Formatierungen. Die Stilnamen werden als Selektoren bezeichnet. Selektor deshalb, weil über den Namen des Stils auch das (X)HTML-Element (oder mehrere), dem die Formatierung zugewiesen wird, bestimmt, also ausgewählt, wird. CSS-Stile lassen sich mit den Absatz- und Zeichenformaten Ihrer Textverarbeitung vergleichen, denn sie legen fest, wie der damit formatierte Teil der Webseite aussieht. Sie können damit sowohl die Zeichenformatierungen wie auch Hintergrundbilder, Aufzählungen, Einrückungen, Abstände etc. definieren.

Wie funktioniert CSS?

Der CSS-Standard legt lediglich die CSS-Eigenschaften fest sowie die Syntax, mit der Selektoren definiert, kombiniert und zugewiesen werden. CSS-Code beschreibt also nur, wie eine Webseite aussehen soll. Der Rest ist Aufgabe der Browser oder des Programms, mit dem die Webseite dargestellt wird. Wenn ein Programm verwendet wird, das die Webseite vorliest, ein so genannter Screenreader, muss dieses die entsprechenden CSS-Befehle für die Sprachausgabe beherrschen, damit Sie die Reihenfolge steuern können, in der die Seite vorgelesen wird. Gleiches gilt für den Browser. Auch er muss in der Lage sein, die CSS-Stile zu lesen und die Webseite entsprechend anzuzeigen. CSS definiert also nur, wie eine Webseite aussehen soll. Ob die Ausgabe auch so erfolgt, hängt von dem Programm ab, das die Ausgabe erzeugt.

Der CSS Standard im Überblick

CSS war einer der ersten W3C-Standards, die verabschiedet wurden. Mittlerweile liegt CSS in der Version 2.1 vor, die CSS-Version 3.0 ist in Arbeit. Erhebliche Unterschiede gibt es vor allem zwischen den CSS-Versionen 1 und 2 und wieder in der zukünftigen Version 3.0. Während in CSS 1.0 vor allem die reine Formatierung der Webseite im Vordergrund stand, wie die Schriftfarbe und -größe oder die Hintergrundformatierungen, geht es im CSS 2.0- Standard vornehmlich um die Positionierung der Elemente innerhalb der Seite sowie deren Überlappung und Größe. Der CSS-Befehlssatz, der diese Formatierungen ermöglicht, wird kurz mit dem Begriff Positionierung umschrieben, obwohl das nicht völlig zutreffend ist.

Mit CSS 3.0 werden vor allem neue Selektoren eingeführt, mit denen Sie auf bestimmte Tabellenzellen zugreifen oder nur Elemente mit bestimmten Eigenschaften formatieren können. Aber das ist noch Zukunftsmusik, weil nur wenige Browser den kommenden CSS 3.0-Standard bereits unterstützen – und das auch nur ansatzweise.