Stylesheets sind das vom W3-Konsortium favorisierte Mittel, einem strukturierten Webdokument
»Stil« hinzu zu fügen, es also in Layout und Design mit den Vorstellungen der
Webautor-inn-en in Einklang zu bringen. Zudem kann durch Stylesheets die Darstellung des Seiteninhalts
an die Erfordernisse verschiedener Ausgabemedien (Browser, Drucker, Handhelds, TV-Geräte,
etc.) angepasst werden. All dies wird durch eine strikte Trennung von Struktur und Präsentation
beim Schreiben von Webdokumenten erreicht, was besonders markant in der Auslagerung der
Stilbeschreibungen in eigene CSS-Dateien, die im Kopfteil der Seite mittels des
<link>
-Elements eingebunden werden, zum Ausdruck kommt.
Eine Alternative zu diesen externen Stylesheets stellen interne Stylesheets dar, die
– wiederum im Kopfteil – in das <style>
-Element
inkorporiert werden. Abzuraten ist hingegen von der Nutzung sogenannter Inline-Styles,
die den einzelnen (X)HTML-Elementen über das style
-Attribut
zugewiesen werden, da auf diese Weise nicht nur die obsolet gewordene Vermischung von
Inhalt und Darstellung wiederbelebt, sondern auch die Wartbarkeit des Markups selbst
in hohem Maße gefährdet wird.
Die zur Zeit maßgebliche Version der auf die Präsentation strukturierter Dokumente (HTML, XML, etc.) zielenden Stylesheetsprache Cascading Style Sheets (CSS), die ihren ersten Namensteil übrigens dem in ihr zum Tragen kommenden Prinzip der »Kaskade«, einem Prinzip der Vererbung und Gewichtung also, verdankt, ist die Version 2.1, die allerdings erst den Status einer »Candidate Recommendation« besitzt, gleichwohl aber in modernen Browsern ziemlich weitreichend umgesetzt ist (Fehlimplementierungen sind dabei freilich immer in Rechnung zu stellen). Die folgenden Beschreibungen orientieren sich daher auch an dieser Version, zumal die kommende Version 3, die grundsätzlich dem Leitgedanken einer Modularisierung folgt, erst in Teilbereichen mit fortgeschritteneren Entwürfen aufwarten kann.
<link>
-Element<head> […] <link rel="stylesheet" type="text/css" media="screen" href="css/layout.css" /> </head>
<style>
-Element<head> […] <style type="text/css"> h1 { font-family: "DejaVu Sans", sans-serif; font-size: 1.4em; } p { font-family: "DejaVu", serif; font-size: 0.9em; } </style> </head>
Eine CSS-Regel, die näher bestimmt, wie ein Element im Dokumentfluss von den jeweiligen User
Agents umzusetzen ist, folgt einem immer wiederkehrenden Grundschema: einem Selektor, der auf ein
(X)HTML-Element oder auf dessen Spezifizierung durch einen Identifikator bzw. ein class
-Attribut
referiert, wird mit einer Deklaration bzw. einem Deklarationsblock eine Eigenschaft, die einen bestimmten Wert
annimmt, zugewiesen. Die Selektoren können zusätzlich miteinander kombiniert werden, so dass
die entsprechenden (X)HTML-Elemente – der Dokumenthierarchie entsprechend – mit
wechselnden CSS-Eigenschaften kontextsensitiv angesprochen werden können.
Die Syntax einer CSS-Regel sieht also folgendermaßen aus:
Selektor { Eigenschaft: Wert; }
Auf einen Selektor, der auch eine nach gewissen Regeln kombinierte Gruppe von Selektoren sein kann, folgt, eingefasst von geschweiften Klammern, eine Deklaration, die einer CSS-Eigenschaft nach einem obligatorischen Doppelpunkt einen bestimmten Wert zuschreibt, wobei die Deklaration selbst möglichst durch ein Semikolon beendet werden sollte. Verpflichtend ist dieses Setzen eines Semikolons allerdings nur dann, wenn einem Element in einer gemeinsamen Deklaration (einem sogenannten Deklarationsblock) gleichzeitig verschiedene CSS-Eigenschaften zugewiesen werden sollen, die dann eben voneinander differenziert werden müssen. Diese CSS-Syntax kommt sowohl bei externen, als auch bei internen Stylesheets zur Anwendung.
Mit dem Universalselektor, der durch einen Asterisk wiedergegeben wird, wird jeder Elementtyp,
der in ein Webdokument Eingang gefunden hat, angesprochen. Bei zusammen gesetzten Selektoren wie
*#myid
oder *.neueklasse
kann der
Asterisk aber auch weg gelassen werden.
* { font-size: 100.01%; } #inhalt { float: left; width: 70%; } *.datum { color: #000000; background-color: #bdbdbd; } .hinweis { color: #900000; background-color: #bdbdbd; }
Ein Element- oder Typselektor hat zielgenau für das jeweils gewählte Element Gültigkeit, und zwar über das ganze Dokument hinweg; Elementselektoren können aber auch zu Gruppen zusammen gefasst werden, wenn die gewünschten CSS-Eigenschaften mehreren Elementen zugleich zugewiesen werden sollen.
p { font-family: sans-serif; font-size: 0.95em; } h1, h2, h3 {font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 1.4em; } h2 { font-size: 1.3em; } h3 { font-size: 1.2em; }
Nachfahrenselektoren selegieren all die Elemente, die in andere Elemente geschachtelt sind, also im Dokumentbaum
einem bestimmten anderen Element nachfolgen. Hierdurch können CSS-Eigenschaften sehr zielgerichtet
zugewiesen werden, ohne dass neue class
-Attribute ins (X)HTML-Markup
eingeführt werden müssen.
h1 em { font-weight: bold; } p em { font-style: italic; }
Kindselektoren nehmen Bezug auf genau die Elemente, die in der direkten Nachfolge eines anderen Elements zu finden sind, d.h. zugleich, sie gelten nicht mehr für jene Elemente, die eine weitere Ebene (oder mehr) darunter liegen.
p > em { font-style: italic; font-weight: bold; }
Benachbarte-Geschwister-Selektoren kommen dann zum Einsatz, wenn zwei Elementtypen ein gemeinsames Elternelement
haben und zugleich unmittelbar aufeinander folgen; mit diesem Selektor lassen sich also bestimmte
Bedingungen für das Zuschreiben von CSS-Eigenschaften formulieren. Im Übrigen kann das
jeweils erste Geschwisterelement auch mit einem class
-Attribut versehen
sein, so dass im Stylesheet der Klassenselektor einsetzbar wird.
blockquote + p { text-indent: 0; } h1.titel + h2 { margin-top: 2em; }
Mit Attributselektoren haben Webautor-inn-en die Möglichkeit, gezielt auf Elemente mit bestimmten Attributen Bezug zu nehmen; allerdings wird dieser Selektor nicht von allen Browsern ausreichend unterstützt.
p[attribut] { text-indent: 0; } a[href="http://domain.de/"] { color: #900000; background-color: #bdbdbd; } a[class~="extern"] { color: #444444; background-color: #f2f2f2; } a[href^="https"] { color: #000000; background-color: yellow; } a[href$=".pdf"] { color: #900000; background-color: #ffffff; } img[src*="/grafik/"] { width: 5em; height: 7em; }
Der Klassenselektor zählt zwar zu den Attributselektoren, er kann aber insofern eigenständigen
Rang beanspruchen, als das ihm zu Grunde liegende class
-Attribut im
(X)HTML-Markup die Funktion der Spezifizierung eines Elements zugewiesen bekommen hat.