Cascading Style Sheets (CSS):
Layout-Vorlagen für HTML

Zu diesem Dokument

Die ursprüngliche Idee bei der Entstehung von HTML war, eine logische Strukturierung eines Dokumentes zu ermöglichen. Mit der Weiterentwicklung kamen immer mehr Elemente mit Layout-Funktionen in HTML hinzu. Mit Style Sheets gibt es ein Instrument, logische Strukturierung und Layout-Aspekte wieder sauber zu trennen:

• Das HTML-Dokument enthält im Body-Teil nur noch Markup wie <Hx> ... </Hx>, <P> ... </P>, Listen und Hervorhebungen; Elemente wie FONT und Attribute wie ALIGN, COLOR fliegen raus.
• Die Gestaltung von Überschriften, Absätzen etc. wird in der eigenen CSS-Sprache formuliert und steckt im Head-Teil des HTML-Dokumentes oder einer getrennten Datei.

Dieses Dokument basiert wesentlich auf einem Tutorium von Dave Raggett vom W3C: Adding a touch of style, und teilweise auf der Referenzinformation, der W3C-Recommendation Cascading Style Sheets, level 1.

Gleichzeitig ist es - durch ein klein wenig Skript-Programmierung - so aufgebaut, dass die Wirkung der einzelnen Style-Sheet-Anweisungen schrittweise illustriert werden kann.

Einbettung in die HTML-Seite

Style Sheets können direkt in das HTML-Dokument eingebettet werden, und zwar in den Head-Teil des Dokumentes als Inhalt des STYLE-Elementes:

<STYLE TYPE="text/css">
body { color: black; background: white; }
</STYLE>

Inhalt des STYLE-Elementes ist kein HTML-Markup, sondern sind Style-Anweisungen (in der CSS-Sprache). Sie bestehen aus dem Namen eines HTML-Elementes (hier: body) bzw. einer Liste solcher Namen durch Komma getrennt gefolgt von einer - in geschweiften Klammern eingeschlossenen - Liste von Merkmalen der Form:

name: wert;

In diesem Beispiel wird für das Element BODY - und damit für das gesamte Dokument - die Text- und Hintergrundfarbe bestimmt. Die Wirkung des obigen Style-Elementes kann durch Klicken auf folgendes Icon gestestet werden:

Style-Definitionen in einem getrennten Dokument

Statt in das HTML-Dokument eingebettet können Style-Anweisungen auch in einem eigenen Dokument stehen, das aus einer HTML-Datei mittels des LINK-Elementes im HEAD-Teil referiert wird:

<LINK REL="stylesheet" HREF="mystyle.css">

oder

<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">

Die Bedeutung des HREF-Attributes ist wie sonst, die übliche Dateiendung ist css. Die zweite Form des LINK-Elementes ist unabhängig von der HTTP-Server-seitigen Zuordnung des Dokumententypes. Demonstration mit obigem Inhalt in der css-Datei durch Klicken auf folgendes Icon:

Diese Form bietet sich besonders an, wenn eine Style-Definition für eine Sammlung von Dokumenten gelten soll. Nachträgliche Layout-Änderungen müssen dann nur an einer einzigen Stelle vorgenommen werden, alle Dokumente, die die gleiche Style-Sheet-Datei verwenden, behalten ein einheitliches Erscheinungsbild.

LINK und STYLE können auch gemeinsam verwendet werden. In der inneren Style-Definition in der HTML-Seite können einzelne Merkmale überschrieben werden; alle anderen gelten aus der übergeordneten Definition weiter.

Style-Merkmale für ein einzelnes HTML-Element

Mit dem STYLE-Attribut können für ein einzelnes HTML-Element Style-Merkmale angegeben werden. Als Wert dieses Attributes treten Angaben der Form name: wert; auf, wie sie sonst bei Style-Anweisungen innerhalb der geschweiften Klammern stehen. Beispiel:

<P STYLE="color: red;">

Ränder, Begrenzungen, Abstände

Ränder für das gesamte Dokument

Häufig wird angestrebt, die Breite des Fließtextes zu veringern gegenüber der meist recht großen Gesamtbreite des Browser-Fensters. Mit "klassischem" HTML geht dies nur durch (ggf. geschachtelte) BLOCKQUOTE-Elemente, die aber dafür nicht vorgesehen sind. Andere Techniken nutzen Tabellen oder Frames, die für diesen Zweck allein auch nicht das richtige sind. Mit folgender Style-Regel geht dies viel einfacher - hier linker und rechter Rand festgelegt in prozentualem Verhältnis zur jeweiligen Fensterbreite:

body { margin-left: 15%; margin-right: 10%; }

Durch die Bezugnahme auf das BODY-Element gelten diese Ränder für das gesamte Dokument; siehe Demonstration:

Andere Ränder für Überschriften

Wenn die größeren Überschriften aus diesem Textrahmen herausrücken sollen, kann dies durch eine negative Angabe für den linken Rand geschehen:

h1 { margin-left: -10%; }
h2 { margin-left: -5%; }

Für alle anderen (sog. Block-Level-)Elemente wie Absätze, Listen und die kleineren Überschriften gilt weiter der Rand für das gesamte Dokument.

Absätze mit Begrenzungslinien und/oder farbigem Hintergrund

Hervorhebung einzelner Absätze durch eine Umrandung und/oder einen farbigen Hintergrund sind mittels CSS möglich, ohne dafür die beliebte einzeilige und einspaltige Tabelle heranziehen zu müssen.

p.umrandet { border-width: thick;
border-style: solid;
border-color: blue;
background-color: #ffffcc;
padding-left: 1em;
padding-right: 1em;
}

Dies soll ein blau umrandeter Absatz mit hell-gelbem Hintergrund werden, sobald obige Style-Regel auf diesen Absatz der Klasse umrandet angewendet wird; im HTML-Markup ist die Klasse über das Attribut CLASS="umrandet" zugeordnet. Ansonsten gilt für solche Absätze, dass alle anderen Merkmale von normalen Absätzen oder dem gesamten Dokument aus vorherigen CSS-Definitionen geerbt werden.

Abstände zwischen Absätzen

Mit Style Sheets lassen sich endlich auch die Abstände zwischen Absätzen variieren - durch Setzen der Merkmale margin-top und margin-bottom. Als Maßeinheiten eignen sich besonders die relativ auf die Schriftgröße bezogenen Angaben in em.

p { margin-top: 0.5em; margin-bottom: 0.5em; }
h1 { margin-top: 2em; margin-bottom: 1em; }
h2,h3 { margin-top: 1em; margin-bottom: 0.5em; }

Der Abstand z.B. zwischen einer Überschrift und einem Absatz soll nicht addiert werden aus dem margin-bottom-Wert der Überschrift und dem margin-top-Wert des folgenden Absatzes, sondern nach dem Maximum der beiden Werte bestimt werden. (Nicht alle Browser scheinen dies korrekt zu machen.) Test hier:

Einzug in der ersten Zeile von Absätzen

So kann ein Absatz beschrieben werden, der statt durch den Abstand durch Einrückung des Textes in der ersten Zeile sichtbar wird.

p.pp { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

Um diesen Effekt zu demonstrieren, folgen hier zwei Absätze zur Klasse pp - dies ist der erste.

Dieser zweite sollte ohne zusätzlichen Abstand auf den vorherigen folgen, sobald über einen der beiden folgenden Icons die entsprechende Style-Regel wirksam wird.

Schrift-Beeinflussung

Über die im folgenden beschriebenen Merkmale in CSS kann die Schrift beeinflusst werden - für das gesamte Dokument, für sog. Block-Level-Elemente wie Absätze, Überschriften und Listen oder auch für sog. Inline-Elemente wie die logischen Stile EM und STRONG.

Merkmal	Mögliche Werte
font-style	normal, italic, oblique
font-weight	normal, bold, bolder, lighter
font-size	Relative Größe bezogen auf die normale Absatzschrift, z.B. in x% oder absolute Angabe in pt (Punkt).
font-family	Schriftart oder Liste von Schriftarten durch Komma getrennt, an deren Ende eine der "generischen" Familien stehen kann: serif, sans-serif, monospace

Hier ein typisches Beispiel für Überschriften in einer serifen-freien Schrift und Absatztext in einer Schrift mit Serifen:

h1 { font-style: normal; font-weight: bold; font-size: 200%; font-family: Verdana, Arial, sans-serif; } h2 { font-style: normal; font-weight: bold; font-size: 180%; font-family: Verdana, Arial, sans-serif; } h3 { font-style: italic; font-weight: bold; font-size: 160%; font-family: Verdana, Arial, sans-serif; } p,li { font-style: normal; font-weight: normal; font-size: 100%; font-family: Garamond, Book Antiqua, serif; } strong { font-weight: bold; color: red; }

Und hier gleich die Demonstration in gewohnter Weise:

Damit obiger CSS-Quell-Ausschnitt lesbar dargestellt wird, wurde schon im vorherigen Schritt die Absatz-Klasse example mit folgenden Merkmalen eingeführt und angewendet:

p.example { border-style: none; background-color: #ffffcc; white-space: pre; font-family: monospace; }

Das Merkmal white-space mit dem Wert pre bewirkt eine Behandlung von Leerzeichen und Zeilenenden wie in der PRE-Umgebung von HTML; deshalb hier auch die monospace-Schriftwahl. Anders als es bei der Verwendung des echten PRE-Elementes im HTML-Markup wäre, erben auch diese Absätze die anderen, vorher festgelegten Absatz-Merkmale wie den linken und rechten Rand.

Farben und anderes für Hyperlinks

In vorherigen Beispielen wurde gezeigt, wie die Farbe für den Hintergrund insgesamt oder den einzelner Absätze, für Ränder und für den Text definiert werden kann. Was fehlt, sind die Farben für Hyperlinks. Um diese - und andere Merkmale - für die diversen Arten von Hyperlinks angeben zu können, kennt der CSS-Standard die folgenden Pseudo-Klassen: link, visited, active, hover. Letztere gilt für Hyperlinks, auf die der Mauszeiger zeigt (hover heißt schweben). Diese Pseudo-Klassen werden durch einen Doppelpunkt getrennt angeheftet. Hier ein Beispiel:

a:link { color: blue; } a:visited { color: purple; } a:active { color: blue; } a:hover { color: blue; text-decoration: none; background-color: #ffffcc; }

Die letzte Variante - ohne Unterstreichung und mit verändertem Hintergrung - kann evtl. die Treffgenauigkeit erleichtern. Hier die Demonstration:

Für eine Liste der benannten Farben, für die Syntax der Farbangabe in CSS und die Liste der 6³=216 sog. browser safe colors verweise ich auf das Tutorium von Dave Raggett.