Bei konsequenter Anwendung von CSS werden alle Elemente über CSS formatiert und positioniert, d.h. Inhalt und Struktur einerseits und Darstellung (Design) andererseits werden getrennt. Idealerweise enthält kein Tag unmittelbare Angaben zu seiner Darstellung, sondern gegebenenfalls nur eine Angabe, zu welcher Klasse (class) das jeweilige Element gehört bzw. welche ID (identifier) es hat. Alle Format- und Positionsangaben (Stile oder styles) werden dann für das Tag selbst oder für diese Klasse bzw. für die ID definiert. Beispiele für die Leistungsfähigkeit von CSS sind:
Die wichtigsten CSS-Befehle sind in einer Übersicht zusammengestellt.
Sollen mehrere HTML-Seiten mit demselben Layout erstellt werden, dann gehören die Stildefinitionen in eine gesonderte Datei mit der Endung ".css": Layout-Änderungen brauchen so nur noch zentral in dieser Datei vorgenommen zu werden; und der Besucher der Webseiten braucht die Stildefinitionen auch nur einmal für alle zusammengehörenden Seiten herunter zu laden (Verkürzung der Ladezeiten). Diese CSS-Datei muß dann in das HTML-Dokument eingebunden werden. Dazu dient das <link>-Tag im Head-Bereich des HTML-Dokuments. Für eine CSS-Datei namens "styles.css" schreibt man etwa:
Erstelle eine CSS-Datei mit dem Editor Phase 5 und binde diese in Deine HTML-Seiten ein! CSS-Dateien eines Projekts sollten in dem entsprechenden Unterverzeichnis gespeichert werden. Ihr Name sollte nur kleingeschriebene Buchstaben des ASCII-Zeichensatzes, also keine Umlaute oder Sonderzeichen, enthalten.
Soll – auch in der Zukunft – nur eine einzelne HTML-Seite mit einem bestimmten Layout erscheinen, können die Stile auch mittels des <style>-Tags im <Head>-Bereich dieser HTML-Seite definiert werden. Schau dies gegebenenfalls nach dem Kurs in einer CSS-Dokumentation oder bei Selfhtml nach (Hinweis: in XHTML müssen Stil-Definitionen im Header mittels CDATA maskiert werden). Die dritte Möglichkeit – Definition der Stile direkt innerhalb eines HTML-Tags mittels des Attributs "style" – widerspricht dem Grundgedanken von CSS (der Trennung von Inhalt und Layout) und sollte daher nicht verwendet werden.
Öffne Deine CSS-Datei mit Phase 5, aktiviere den CSS-Reiter und erzeuge ein neues Stilelement, z.B. einen Absatz mit roter Schrift auf gelbem Hintergrund ("Farbe" bezieht sich immer auf die Vordergrund- bzw. Textfarbe). Du siehst, wie eine Stildefinition aufgebaut ist: zuerst wird angeben, auf welche Art von Elementen sich der Stil bezieht (der Selektor), dann folgt in einer geschweiften Klammer eine Liste von Attribut-Wert-Paaren mit einem Doppelpunkt nach dem Attribut. Jedes Attribut-Wert-Paar wird mit einem Semikolon abgeschlossen. – Hinweis: In Stildefinitionen stehen die Wertenamen genau dann in Anführungsstrichen, wenn ihre Namen Leerzeichen enthalten. In Phase 5 werden auch diese Werte in der Regel ohne Anführungszeichen geschrieben. – Sieht Deine HTML-Seite in der Vorschau wie erwartet aus?
Um einem Bereich, der aus mehreren Blockelementen besteht, eine gemeinsame Eigenschaft zuzuordnen, wird dieser Bereich von <div> und </div> umschlossen. So kann man z.B. dem eigentlichen Inhaltsbereich ein Hintergrundbild oder eine bestimmte Position auf der Webseite zuordnen. Um einem Bereich innerhalb eines Blockelements eine gemeinsame Eigenschaft zuzuweisen, wird dieser Bereich von <span> und </span> umschlossen. Zum Beispiel könnte der Inhaltsbereich einer Seite folgendermaßen bestimmt werden:
In der zugehörigen CSS-Datei könnte dann stehen:
Wie würde die Schrift im Inhaltsbereich dargestellt? Und welche Farbe hätte der Hintergrund?
Besonders interessant ist es, die ereignisabhängige Darstellung zu ändern: So kann man die Unterstreichung von Links abschalten oder bereits besuchte Links mit einer besonderen Farbe auszeichnen. Dazu dienen sog. Pseudo-Klassen und Pseudo-Elemente. Die wichtigste Pseudo-Klasse ist die Anker-Pseudo-Klasse, mit der die verschiedenen Stadien eines Links angesprochen werden. Mit
wird z.B. das Unterstreichen von Links abgestellt.
Mithilfe von CSS kann man nicht nur die vorhandenen HTML-Tags umdefinieren, sondern mittels der Identifikatoren auch eindeutig benannte Seitenelemente sowie mittels der Klassen verschiedene Arten von Absätzen, Überschriften usw. jeweils unterschiedlich formatieren:
Namen für Klassen beginnen also immer mit einem Punkt und Namen für Identifikatoren mit einem Doppelkreuz. Das erste Beispiel bewirkt, daß alle Seitenelemente, denen die Klasse "wichtig" zugeordnet wurde, mit einem roten Hintergrund dargestellt werden. Ein wichtiger Absatz würde also z.B. so beschrieben:
Die Einbettung in einen <div>-Abschnitt stellt sicher, daß alle Browser die Stildefinitionen korrekt anwenden können. Das zweite Beispiel bewirkt, daß der Text im Hauptmenü
dargestellt wird. Ein Hauptmenü, das als Liste realisiert ist, würde dann so beschrieben werden:
Selektoren können auch kombiniert werden, etwa um hervorgehobene Textstücke in einer Überschrift anders zu formatieren als hervorgehobene Textstücke im normalen Text: Mit
wird festgelegt, daß ein hervorgehobenes Textstück in einer Überschrift 1. Ordnung rot darzustellen ist.
Zwei weitere wichtige Konzepte von CSS, Vererbung und das namengebende Kaskadierung sollen jetzt nur noch kurz angesprochen werden: Mit Vererbung ist gemeint, daß Stil-Eigenschaften von Elementen auf deren untergeordnete Elemente ("Nachfahren") weitergegeben ("vererbt") werden. Kaskadierung betrifft die Rangfolge, in der verschiedene Stil-Definitionen für ein und dasselbe Element angewendet werden.
Die Darstellung von Stilen ist sowohl vom Browser als auch vom Betriebssystem abhängig. Eine Liste mit weitgehend unproblematischen Stil-Befehlen und eine Übersicht über die Browser-spezifischen Besonderheiten ist z.B. in dem Buch "CSS-Praxis" von Kai Laborenz enthalten (die Liste auf S. 130 der 2. Aufl., die Übersicht als beiliegende Karte). Darüberhinaus hängt die Darstellung vom gewählten Dokumententyp ab: Browser haben neben einem Standard-Modus, in dem sie die Vorgaben des W3-Konsortiums weitgehend einhalten, noch einen sog. Quirks-Modus, in dem sie das Verhalten älterer Browser nachzuahmen versuchen. Je nach Doctype-Angabe schalten die Browser in den Standard- oder in den Quirks-Modus, wobei sich die einzelnen Browser durchaus unterschiedlich verhalten. Eine Übersicht ist in dem Buch "CSS-Praxis" von Kai Laborenz enthalten (auf S. 112 f. der 2. Aufl.).
In Netscape 4.x werden mit JavaScript auch Styles abgeschaltet (nur das Abschalten von JavaScript ist aus Sicherheitsgründen dringend zu empfehlen; Styles sind nach dem derzeitigen Stand des Wissens unproblematisch).
Lücken zwischen untereinander angeordneten Graphiken beim Dokumententyp HTML 4.01 (strict) und XHTML in Mozilla-Browsern, die es in HTML 3.2 und HTML 4.01 (transitional) nicht gegeben hat: Ursache ist, daß der Standardwert für vertical-align nicht die Unterkante des Elements (bottom), sondern die Grundlinie eines Textes innerhalb des Elementes ist (baseline). Die Mozilla-Browser lassen daher korrekterweise Platz für Unterlängen frei, auch wenn im konkreten Fall gar kein Text in dem Element enthalten ist. Lösung nach Kai Laborenz: CSS-Praxis, 2. Aufl., S. 381ff.: Die (obere) Graphik bzw. alle Graphiken innerhalb von Absätzen (Selektor p img) mit vertical-align: bottom ausrichten, oder die Zeilenhöhe (line-height) auf "0" setzen. Die erste Möglichkeit führt zu Problemen bei Opera 6 und 7 (Fehlanzeigen) und beim Internet Explorer (4.x - 6; unzuverlässige Darstellung).
Die Größe ein und derselben Schrift wird von verschiedenen Browsern und Betriebssystemen unterschiedlich groß angezeigt. Schriften, die auf PCs noch lesbar sind, sind in Macintosh-Browsern nicht mehr zu erkennen. Informationen dazu z.B. auf der Win-Mac-Seite von Rene Grassegger (http:/grassegger.at/winmac/index.htm) und auf der Seite von Fabrice Pascal (www.fabrice-pascal.de/artikel/sizediscussion). Darüberhinaus werden die CSS-Schlüsselwörter für die Schriftgrößen von den verschiedenen Browsern unterschiedlich auf die früher verwendeten HTML-Schriftgrößen bezogen. Um ein etwa gleiches Aussehen einer Schrift in allen Browsern zu erreichen, muß man eine Browserweiche einbauen (ausführlich beschrieben z.B. im Kap. 4.4 des Buches "CSS-Praxis" von Kai Laborenz (2. Aufl.)).
Inhalte zentrieren: Um einen Bereich horizontal zu zentrieren, würde theoretisch die Angabe "margin: auto;" in einer Stildefinition für diesen Bereich genügen. Text, der innerhalb dieses Bereiches steht, hätte dabei linksbündig zu bleiben. Dies funktioniert jedoch nicht im Internet Explorer. Lösung (nach Kai Laborenz, "CSS-Praxis" 2. Aufl., Kap. 5.5): die Angabe "text-align: center" im <body>-Tag bewirkt das Zentrieren aller Inhalte eines Kastens. Mit dem Einfügen eines <div>-Bereiches, der mit "margin: auto; text-align: left;" formatiert wird und in dem dann der linksbündig anzuordnende Text untergebracht wird, ist man am Ziel: ein zentrierter Block, der linksbündigen Text enthält. In der Stildefinition könnte also z.B. stehen:
Etwas komplizierter ist das vertikale Zentrieren. Die verschiedenen Ansätze, die es hierzu gibt, sind aber alle auch mit Nachteilen verbunden (ausführlich dargestellt z.B. von Kai Laborenz in seinem Buch "CSS-Praxis" (2. Aufl., S. 171)).
Feststehende, dynamische und aus Listen aufgebaute Menüs: Obwohl auch das Prinzip für feststehende Menüs ganz einfach ist, braucht man für den Internet Explorer (5 und 6) einige Tricks, da dieser die Angabe "position: fixed" nicht gemäß CSS2-Standard umsetzt (die Lösung von Fabrice Pascal wird z.B. von Kai Laborenz in seinem Buch "CSS-Praxis", S. 175ff. (2. Aufl.) ausführlich besprochen). Aufgrund der Browser-spezifischen Grenzen noch aufwendiger ist es, dynamische Menüs mit CSS zu entwickeln (vgl. z.B. Abschn. 5.6.2 in dem Buch von Kai Laborenz) – aber es geht! Besonders trickreich sind Menüs, die aus Listen aufgebaut werden (vgl. z.B. Abschn. 5.6.3 in dem Buch von Kai Laborenz). Das Tool List-O-matic unterstützt das Entwickeln solcher Listen aber sehr.
Im Zusammenhang mit Menüs sind die unterschiedlichen Bildschirmauflösungen besonders gefährlich: Wer sich sehr chic (aber wenig professionell) gestylte Seiten schon mal mit einem älteren Bildschirm angesehen hat, der hat sich sicherlich auch schon mal gewundert, wieso er nur Teile des Menüs erreichen kann – und kein Scollbalken in Sicht, der Abhilfe schafft. In einem solchen Fall ist die Positionierung der Menüs nur bei einer "Standard"-Auflösung getestet worden: sonst wäre aufgefallen, daß sich bei anderen Auflösungen einige Seitenbereiche ungewollt über andere schieben bis hin zum Nicht-mehr-Funktionieren der gesamten Seite. Hier hilft nur Ausprobieren und eine geschickte Wahl der Attribute zur Positionierung sowie der Reihenfolge der einzelnen Bereiche.