# CSS – Layout fürs Internet
Wenn man bedenkt, wie viele Fehler die Computer machen, dann kann man sie als die teuersten Trottel der Welt bezeichnen.
– Renzo Favalli
CSS ist wohl die interessanteste Entwicklung zur Gestaltung einer Webseite und wird mittlerweile im gleichen Atemzug mit HTML genannt. Die Möglichkeiten sind vielfältig und übersteigen die bescheidenen Gestaltungsmöglichkeiten von HTML bei weitem. Ich werde Ihnen zu Beginn die Grundstrukturen und die Implementation in HTML erklären, sodass Sie schließlich alle wichtigen CSS-Elemente kennen gelernt haben.
# CSS – Make-up fürs Web ...
CSS ist die Abkürzung für »Cascading StyleSheets« und stellt eine Erweiterung zu HTML dar, die vom W3C entwickelt wurde. Ihr Ziel ist es, zu den Wurzeln von HTML zurückzukehren und den Inhalt von der Gestaltung zu trennen. Schließlich ist die eigentliche Aufgabe von HTML, Daten und Inhalte zu strukturieren. Diese Aufgabe kann HTML nur schwerlich erfüllen, wenn es mit font-Elementen überladen wird. An dieser Stelle greift nun CSS ein. Es kümmert sich um die optische Gestaltung der Inhalte, während HTML diese nur kennzeichnet und zur Verfügung stellt.
Die Übersetzung von »Stylesheet« ins Deutsche macht diese Aufgabe sogar noch konkreter: Formatvorlage. Formatvorlagen dürften Ihnen vielleicht aus Programmen wie Microsoft Word bekannt vorkommen. Denn auch dort können Sie Textbausteine als Überschrift oder Absatz kennzeichnen und das Aussehen dieser Elemente durch eine Formatvorlage verändern. In HTML bedeutet das für Sie, nicht jedes einzelne Element durch das font-Element verändern zu müssen, sondern eine Vorlage anzufertigen, die für jedes HTML-Dokument verwendet werden kann. So können Sie einer Überschrift der 2. Ordnung (h2-Element) in jedem Dokument die gleiche Farbe zuweisen und müssen eine Änderung der Farbe nur einmal durchführen. Sie führen also eine logische Formatierung des Inhalts des HTML-Dokuments durch, ähnlich wie mit dem em- oder kbd-Element, ganz wie es dem ursprünglichen Gedanken einer Auszeichnungssprache entspricht, und überlassen die optische Formatierung dann CSS.
# Wie funktioniert CSS?
Bisher haben Sie das Aussehen eines HTML-Elements über das font-Element verändert.
<h2><font color="#0000FF">Blaue Überschrift</font></h2>
Diese Angabe mussten Sie aber, um ein einheitliches Aussehen beizubehalten, für jedes h2-Element wiederholen, und eine Änderung der Farbe brächte zwangsläufig eine erneute Änderung aller h2-Elemente mit sich (bzw. der font-Elemente). Dies nennt man direkte Formatierung. Lange HTML-Dokumente, die z. B. sehr viele h2-Elemente enthalten, benötigen – ohne entsprechendes Tool – viel Zeit, damit sie überarbeitet werden können. Mit CSS können Sie nun dokumentweit die Farbe für alle h2-Elemente verändern, und zwar mit der folgenden Angabe:
h2 { color: #0000FF; }
Jedes h2-Element, das Sie nun in Ihrem HTML-Dokument notieren, bekommt die Farbe Blau zugewiesen, selbst dann, wenn Sie kein font-Element notiert haben. Sie definieren das Aussehen eines HTML-Elements an einer Stelle, nehmen also eine zentrale Formatierung vor.
Formatierungen mit CSS sind natürlich nicht auf h2-Elemente beschränkt, sondern können für jedes Element vorgenommen werden. Auch die Art der Formatierung ist nicht nur auf die zentrale Variante festgelegt. Sie können Elemente auch direkt formatieren, wenn Sie das möchten. Im Gegensatz zu HTML stehen Ihnen weitaus mehr Möglichkeiten zur Verfügung. So können Sie beispielsweise jeder Überschrift einen kompletten Rahmen in einer von Ihnen gewählten Farbe, Breite und einem Stil zuweisen.
Von einer direkten Formatierung sollten Sie jedoch Abstand nehmen, da Sie dadurch den eigentlichen Sinn und Nutzen von CSS ad absurdum führen.
# CSS-Versionen
Seit der ersten Veröffentlichung des CSS-Standards 1.0 im Jahre 1996 unterliegt auch CSS einer regelmäßigen Erneuerung und Überarbeitung, sodass 1998 bereits die Version 2.0 als offizieller Standard verabschiedet wurde. Aktuell ist die Version 3.0 in Arbeit, die jedoch noch einige Zeit auf sich warten lassen wird.
Das Hauptproblem ist, ähnlich wie bei HTML, die sehr unterschiedliche Unterstützung durch die Browser, da z. B. Microsoft anfängt, sein eigenes Süppchen zu kochen, und viele CSS-Sprachelemente eingeführt hat, die nur mit dem Internet Explorer funktionieren und die auch nicht als offizieller Standard gelten. Ob Microsoft damit versucht, den Internet Explorer noch stärker auf dem Markt zu verbreiten, ist sicherlich eine Überlegung wert, sollte uns jedoch nicht weiter interessieren. Ob mit den oder ohne die IE-spezifischen Sprachelemente: Ein mit CSS formatiertes HTML-Dokument sieht in jedem Browser und abhängig vom Betriebssystem unterschiedlich aus.
Prinzipiell kann man feststellen, dass der Internet Explorer seit der Version 3.0 und Netscape seit der Version 4.0 den CSS-Sprachstandard kennen und ihn auch bedingt unterstützen, dass vor allem aber Netscape-Benutzer häufig mit Fehlinterpretationen zu kämpfen haben. Der Internet Explorer und Opera ab Version 5 und Netscape ab Version 6 haben sich gegenüber ihren Vorgängern deutlich gebessert und warten mit einer beinahe vollständigen Unterstützung des CSS-Standards 1.0 auf; Defizite bei CSS 2.0 sind aber noch häufig anzutreffen. Es ist deshalb sehr schwer, sich für eine der beiden CSS-Versionen zu entscheiden, und es macht daher Sinn, einen Mittelweg zu wählen.
# Direkte Formatierung
Damit Sie einen schnellen und einfachen Einstieg in CSS bekommen, werde ich Ihnen zuallererst die Direktformatierung eines HTML-Elements erklären. Solche Formatierungen gelten nur für das gewählte Element und haben keinen Einfluss auf die restlichen Elemente.
HTML stellt dafür das Attribut style zur Verfügung, das für fast jedes HTML-Element verwendet werden kann. Wie alle HTML-Attribute wird auch dieses im Start-Tag des Elements notiert.
<element ... style="formatierung">...</element>
Als Parameter für das style-Attribut werden nun die unterschiedlichen Formatierungen notiert. Auch dafür gibt es eine standardisierte Schreibweise. Zuerst wird die CSS-Eigenschaft notiert, gefolgt von einem Doppelpunkt »:« und anschließend dem entsprechenden Wert.
Eigenschaft:Wert
In einem HTML-Dokument könnte dies dann folgendermaßen aussehen:
<h2 style="color:#00FF00">Überschrift in blau</h2>
Möchten Sie mehrere Eigenschaften ändern, müssen Sie die Angaben durch ein Semikolon »;« voneinander trennen.
Eigenschaft1:Wert1; Eigenschaft2:Wert2; EigenschaftN:WertN
In einem HTML-Dokument könnte dies dann folgendermaßen aussehen:
<h2 style="color:black; background-color:yellow">Text</h2>
Versuchen Sie, die Eigenschaft, den Doppelpunkt und den Wert immer direkt hintereinander ohne Leerzeichen zu notieren. Zwar sind Leerzeichen erlaubt, ältere Netscape-Versionen haben damit jedoch Probleme, was dazu führen kann, dass eine solche Angabe wie
Eigenschaft: Wert
einfach ignoriert wird. Und dies ist sicherlich nicht in Ihrem Interesse.
# Das erste Stylesheet
Übertragen Sie das folgende Listing 1.1 in Ihren Editor, und speichern Sie die Datei als HTML-Dokument ab.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Das erste StyleSheet //-->
<html>
<head>
<title>Listing 1.1</title>
</head>
<body>
<h1 style="color:#0000FF">Eine blaue Überschrift der 1. Ordnung</h1>
<h1 style="font-family:sans-serif">Eine Überschrift der 1. Ordnung mit einer serifenlosen Schrift</h1>
<h1 style="font-size:16px">Eine Überschrift der 1. Ordnung mit einer 16 Pixel großen Schrift</h1>
</body>
</html>Listing 1.1: Das erste Stylesheet
Abbildung 1.1: Darstellung des Listing 5.1 im Internet Explorer 6.0
In diesem ersten Beispiel wurden drei h1-Elemente mit unterschiedlichen Formaten definiert. Dem ersten h1-Element wurde mit der Anweisung color:#0000FF eine andere Farbe zugewiesen, dem zweiten wurde mit der Anweisung font-family:sans-serif eine andere Schriftart zugeteilt, und dem letzten Element wurde durch die Anweisung font-size:16px eine Schrifthöhe von 16 Pixel zugewiesen.
Wie Sie sehen, ist die Formatierung mit CSS sehr einfach. An diesem Beispiel können Sie jedoch schon den Nachteil der Direktformatierung erkennen. Wenn Sie nur eine Eigenschaft des Elements verändern, wirkt der Quelltext des Dokuments noch sehr sauber und aufgeräumt. Sobald es aber mehr werden, kann es schnell unübersichtlich werden.
# Zentrale Formatierung
Eingangs erwähnte ich bereits, dass sich HTML-Elemente zentral formatieren lassen und dass dies eine der großen Stärken von CSS ist. Dafür benötigen Sie allerdings ein neues Element: das style-Element. Damit ist es jedoch nicht getan. Bei der direkten Formatierung müssen Sie nicht explizit angeben, für welches Element diese Formatierung angewendet werden soll, da Sie dies ja schon festlegen, wenn Sie das style-Attribut im entsprechenden Element notieren. Bei der zentralen Formatierung müssen Sie zuerst den Selektor angeben. Der Selektor basiert auf dem zu formatierenden Element, genauer gesagt entspricht der Selektor dem Namen des Elements. Für das h1-Element lautet der Selektor also h1, für das p-Element p.
Die bereits bekannte Syntax aus der direkten Formatierung wird nun also um den Selektor erweitert. Der Selektor wird zuerst notiert. Danach folgen die CSS-Eigenschaften und die entsprechenden Werte. Diese werden in geschweiften Klammern »{« und »}« angeführt, woraus sich dann die folgende Syntaxstruktur ergibt:
Selektor { Eigenschaft:Wert }
Ein Beispiel:
h2 { color:#0000FF; }
Es wäre allerdings ein wenig umständlich, für jede Eigenschaft eines HTML-Elements, das Sie formatieren möchten, immer wieder aufs Neue den Selektor, die Eigenschaft und den Wert zu notieren. Deshalb ist es auch hier möglich, die einzelnen Eigenschaften und Werte durch ein Semikolon zu trennen.
Selektor { Eigenschaft1:Wert1;
Eigenschaft2:Wert2;
EigenschaftN:WertN; }
Beispiel:
h2 { color:#0000FF;
font-family:sans-serif;
font-size:16px; }
Damit haben Sie nun gesehen, wie Sie die CSS-Eigenschaften und Werte notieren und den jeweiligen Elementen zuordnen können. Fehlt nur noch die Implementierung in HTML. Das style-Element wird im Gültigkeitsbereich des head-Elements notiert und enthält in seinem Gültigkeitsbereich wiederum die Formatierungen. Außerdem sollten Sie den MIME-Typ angeben, der für CSS text/css lautet und als Parameter für das Attribut type notiert wird.
<head>
...
<style type="text/css">
h1 { color:#0000FF;
font-family:sans-serif;
font-size:16px; }
</style>
...
</head>
In diesem Beispiel würden Sie jedem im HTML-Dokument verwendeten h1-Element die Farbe Blau (#0000FF), den Schrifttyp sans-serif und eine Schriftgröße von 16 Pixel zuweisen. Browser, die kein CSS unterstützen, könnten mit einer solchen Angabe jedoch Probleme haben, die CSS-Formatierungen fälschlicherweise als Text interpretieren und dann entsprechend im Browser ausgeben. Um dies zu verhindern, werden die Formatierungen als Kommentar notiert. Browser, die kein CSS unterstützen, ignorieren die Angaben vollständig. Browser, die CSS unterstützen, interpretieren diese Angaben korrekt und ignorieren dann einfach den Kommentar.
<head>
...
<style type="text/css">
<!--
h1 { color:#0000FF;
font-family:sans-serif;
font-size:16px; }
//-->
</style>
...
</head>
Natürlich können Sie CSS-Formatierungen für mehrere Elemente innerhalb des style-Elements notieren. Die einzelnen Konstrukte werden dann hintereinander bzw. untereinander notiert.
<style type="text/css">
<!--
Selektor1 { Eigenschaft1:Wert1;
Eigenschaft2:Wert2;
EigenschaftN:WertN; }
Selektor2 { Eigenschaft1:Wert1;
Eigenschaft2:Wert2;
EigenschaftN:WertN; }
SelektorN { Eigenschaft1:Wert1;
Eigenschaft2:Wert2;
EigenschaftN:WertN; }
//-->
</style>
Sehen Sie sich dazu einfach ein vollständiges Beispiel an. Wenn Sie sich die Arbeit sparen möchten, das Listing abzutippen, finden Sie es auf der beiliegenden CD‑ROM im Verzeichnis x:\listings\css\list1.2.htm. Ich möchte Sie aber darauf hinweisen, dass selbst das sture Abtippen eines Listings bereits übt. Und Übung macht ja bekanntlich den Meister.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Zentrale Element-Formatierung //-->
<html>
<head>
<title>Listing 1.2</title>
<style type="text/css">
<!--
h1 { color:#336699;
font-family:sans-serif; }
p { font-size:14px;
font-family:sans-serif; }
//-->
</style>
</head>
<body>
<h1>Zentrale Formatierung</h1>
<p>Die Elemente die in diesem HTML-Dokument verwendet werden, wurden durch CSS zentral formatiert.</p>
<p>Dies kann besonders viel Arbeit sparen, wenn man dabei geschickt vorgeht.</p>
</body>
</html>Listing 1.2: Beispiel für die zentrale Element-Formatierung
In Listing 1.2 werden zentral zwei verschiedene Elemente formatiert: zum einen das p-Element und zum anderen das h1-Element. Beide Elemente bekommen ihre eigenen Eigenschaften zugewiesen. So werden alle Elemente des Typs h1 in der Farbe #336699 und in einer serifenlosen Schrift dargestellt. Auch die p-Elemente erhalten eine serifenlose Schrift. Nur die Farbe ist eine andere, und zwar #000000.
Abbildung 1.2: Darstellung des Listing 1.2 im Internet Explorer 6.0
# Externe Formatierung
Je mehr HTML-Elemente Sie formatieren, umso länger werden die CSS-Angaben. Wenn Sie außerdem die CSS-Formatierungen in mehreren HTML-Dokumenten verwenden möchten, ist es sinnvoll, diese in eine externe Datei auszulagern. Das Auslagern der Formatierungen kann man auch als eine externe Formatierung bezeichnen. Als Dateiendung hat sich für Cascading StyleSheets .css durchgesetzt.
Der Aufbau einer solchen Datei ist einfach. Exakt so, wie Sie die Formatierungen im style-Element notieren würden, werden sie auch in einer externen Datei als reiner Text gespeichert (natürlich ohne style- und Kommentar-Tags).
Um nun diese Datei in einem HTML-Dokument als Vorlage verwenden zu können, müssen Sie das link-Element einsetzen (dt. Verweis). Dieses Element wird ebenfalls im Gültigkeitsbereich des head-Elements notiert.
<head>
...
<link rel="stylesheet" type="text/css" href="beispiel.css">
...
</head>
Die Angaben rel="stylesheet" und type="text/css" weisen die einzubindende Datei als Stylesheet des Typs css aus (rel = engl. relation, dt. Bezug). Im Attribut href (engl. hyper reference, dt. Hyperreferenz) geben Sie dann die entsprechende CSS-Datei an. Dabei gelten die gleichen Regeln wie bei der Angabe eines Verweiszieles im a-Element bezüglich der Verzeichnisse. Sie müssen also absolute und relative Pfadangaben unterscheiden und natürlich auch berücksichtigen, wo die CSS-Datei, von der einbindenden HTML-Datei aus gesehen, liegt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Externe Element-Formatierung //-->
<html>
<head>
<title>Listing 1.3</title>
<link rel="stylesheet" type="text/css" href="list1.3.css">
</head>
<body>
<h1>Externe Formatierung</h1>
<p>Die Elemente die in diesem HTML-Dokument verwendet werden, wurden durch CSS zentral formatiert.</p>
<p>Diese Formatierungen wurden aber in einer externen Datei gespeichert, um sie auch in anderen HTML-Dokumenten verwenden zu können.</p>
</body>
</html>Listing 1.3: Beispiel für eine externe Formatierung
Abbildung 1.3: Darstellung des Listing 1.3 im Internet Explorer 6.0
Die Datei list1.3.css, die in Listing 1.3 als CSS-Stylesheet referenziert wurde, sieht wie folgt aus:
h1 { color:#996633;
font-size:30px; }
p { font-size:14px;
font-family:sans-serif; }
Auch in diesem Beispiel werden wieder nur die Elemente p und h1 formatiert. Das Element h1 erhält die Farbe #996633 und die Schriftgröße 30 Pixel. Das p-Element erhält hingegen die Schriftgröße 14 Pixel und eine serifenlose Schrift.
# Ausgabemedien
Ein weiterer interessanter Aspekt in CSS ist die Möglichkeit, verschiedene Stylesheets für unterschiedliche Ausgabemedien zu definieren. So ist beispielsweise ein Bildschirm ein ganz anderes Ausgabemedium als ein Drucker, insbesondere in Anbetracht der Darstellungsform. Die Darstellung auf einem Monitor ist im Querformat, während die Ausgabe auf einem Drucker in der Regel im Hochformat erfolgt.
Leider ist Netscape nicht einmal in der Version 6 in der Lage, Stylesheets für unterschiedliche Ausgabemedien zu verwenden. Zwar erkennt er das richtige Stylesheet für die Bildschirmausgabe, ignoriert aber konsequent alle anderen. Anders der Internet Explorer: Dieser ist bereits seit der Version 4 in der Lage, das passende Stylesheet für das entsprechende Medium zu verwenden.
Um verschiedene Stylesheets für unterschiedliche Ausgabemedien verwenden zu können, benötigen Sie erstens eine CSS-Datei und zweitens das Attribut media (dt. Medium), das Sie im link-Start-Tag notieren.
Folgende Angaben für das media-Attribut sind erlaubt:
| Parameter | Beschreibung |
|---|---|
| screen | Bildschirmausgabe |
| all | Alle Ausgabemedien |
| aural | Sprachausgabe |
| braille | Braille-Displays (Monitor für Blindenschrift) |
| embossed | Braille-Drucker (Drucker für Blindenschrift) |
| handheld | Ausgabe auf tragbaren Kleinstcomputern wie Handhelds, PDAs etc. |
| Druckerausgabe | |
| projection | Beamer-Ausgabe und Ähnliche |
| tty | Fernschreiber und Ähnliche (tty = engl. teletyper) |
| tv | Ausgabe auf Fernsehgeräten und Ähnlichen |
Tabelle 1.1: Schlüsselwörter für die verschiedenen Ausgabemedien
Eine Angabe für die Ausgabemedien Bildschirm oder Drucker könnte dann wie folgt lauten:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print, embossed" href="print.css">
Die vorherigen Angaben sind HTML-Syntax, für CSS gibt es entsprechend eine eigene Notation:
@import url(screen.css) screen;
@import url(print.css) print, embossed;
# Einheiten
Anders als HTML kennt CSS die unterschiedlichsten Einheiten, um eine Wertangabe zu machen. Während Sie sich bei HTML auf Prozent- und Pixelangaben beschränken müssen bzw. auf die Angabe einer relativen Schriftgröße, kennt CSS Angaben in Zentimetern, Zoll, Prozent, Pixel etc.
Wertangaben in CSS erfolgen durch die Angabe des Werts, gefolgt von der gewünschten Maßeinheit.
| Einheit | Typ | Beschreibung |
|---|---|---|
| cm | absolut | Zentimeterangabe (1/100 m) |
| em | relativ | Relative Angabe in Bezug auf den höchsten Buchstaben im Elternelement |
| ex | relativ | Relative Angabe in Bezug auf den niedrigsten Buchstaben im Elternelement |
| in | absolut | Zollangabe (engl. inch) = 2,54 cm |
| mm | absolut | Millimeterangabe (1/1000 m) |
| pc | absolut | Pica (1 Pica = 12 Punkt) |
| pt | absolut | Punkt (1 Punkt = 1/72 in) |
| px | absolut | Pixelangabe |
| % | relativ | Prozentangabe |
Tabelle 1.2: Maßeinheiten in CSS
Ein paar Beispiele:
1cm
1pt
6pc
16px
10%
Als Dezimaltrennzeichen wird nicht das Komma, sondern der Punkt verwendet, da CSS auf der englischen Sprache und den entsprechenden Regeln basiert.
1.2em
0.8ex
1.5in
2.54cm
6.5pt
Wie Sie sehen, können Sie in CSS die verschiedensten Angaben zu Maßen machen. Es sollte aber erwähnt werden, dass Angaben wie em und ex sehr selten verwendet werden und Sie bei Maßen auch immer darauf achten sollten, dass der Benutzer den Text auch lesen kann.
# Zusammenfassung
- Für die Direktformatierung eines HTML-Elements wird das Attribut
styleverwendet, das im Start-Tag des Elements notiert wird. - Für die zentrale bzw. externe Formatierung von HTML-Elementen wird das Element
styleverwendet, das im Gültigkeitsbereich deshead-Elements notiert wird. - CSS-Dateien sollten über die Endung .css verfügen.
- Für unterschiedliche Ausgabemedien können verschiedene Stylesheets definiert werden. Jedoch unterstützt nur der IE diese in vollem Umfang.
- Maße können in CSS in
cm,mm,px,pt,in,pc,em,exund in Prozent angegeben werden.
# Fragen und Übungen
- Wie lautet die Syntax für die Direktformatierung eines HTML-Elements?
- Wie lautet die Syntax für die zentrale Formatierung von HTML-Elementen?
- Mit welchem Symbol werden mehrere Angaben von Eigenschaften und Werten getrennt?
- Was sollten Sie bei der zentralen Formatierung notieren, damit Browser, die kein CSS unterstützen, die Angaben nicht fälschlicherweise als Text interpretieren und diesen ausgeben?