Dave Raggett   Styling für Webseiten

Dave Raggett, 8. April 2002.

Dies ist eine kurze Einführung, wie Sie Ihre Webseiten optisch aufwerten können. Sie wird Ihnen zeigen, welche Möglichkeiten hierfür die Cascading Style Sheets Sprache (CSS) des W3C, aber auch HTML selbst bieten. Unser Weg wird uns dabei um die allermeisten Stolpersteine herumführen, die immer wieder von den verschiedenen Browsern und ihren unterschiedlichen Versionen gelegt werden.

Damit Style Sheets (Formatvorlagen) funktionieren, ist es äußerst wichtig, fehlerfreies HTML zu schreiben. Ein bequemes Werkzeug, um HTML automatisch von Fehlern zu bereinigen, ist HTML Tidy. Dieses Tool räumt außerdem den Code so auf, daß er anschließend wesentlich leichter zu lesen und editieren sein dürfte. Ich empfehle Ihnen, Tidy regelmäßig über jede HTML-Seite laufen zu lassen, nachdem sie bearbeitet wurde. Zudem erzeugen einige HTML-Editoren ziemlich schlampiges Markup, was Tidy sehr effektiv säubern kann.

Im folgenden lernen Sie, wie Sie:

  • das Style-Element verwenden
  • auf externe Style Sheets verweisen
  • Seitenränder setzen
  • linke, rechte und Erstzeilen-Einzüge setzen
  • beliebigen Leeraum oberhalb und unterhalb erzeugen
  • Schriftart, Schriftstil und Schriftgröße beeinflussen
  • Rahmen und Hintergründe hinzufügen
  • Farben mit Namen oder numerischen Werten angeben
  • Formatierungen für Browser erzeugen, die CSS nicht verstehen

Start

Wir beginnen damit, Text und Hintergrund etwas Farbe zu geben. Dies erreichen Sie durch Verwendung des STYLE-Elementes, mit dem Sie die Formatierung für jedes Tag des Dokumentes festlegen können:

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

Das STYLE-Element hat seinen Platz im HEAD des Dokumentes. Hier ist eine HTML-Vorlage, die zeigt, wo das STYLE-Element hingehört. Sie können das ganz einfach kopieren und in Ihren Editor einfügen, um mit CSS Stylesheets zu experimentieren:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Den Titel Ihres Dokumentes hier einfügen </title>
<style type="text/css">
  body { color: black; background: white; }
</style>
</head>
<body>

Den Inhalt Ihres Dokumentes hier einfügen

</body>
</html>

Zwischen <style> und </style> steht in einer festgelegten Syntax die sogenannte Style Rule (Stilregel). Jede Style Rule beginnt mit einem Tag-Namen, gefolgt von einer in { und } eingeklammerten Auflistung von Stil-Eigenschaften. Im obigen Beispiel erhält das Tag body eine bestimmte Stil-Eigenschaft. Wie Sie sehen werden, bestimmt das body-Tag die Grundlage für das Aussehen Ihrer Webseite.

Jede Stil-Eigenschaft beginnt mit dem Namen der Eigenschaft, gefolgt von einem Doppelpunkt und anschließend einem Wert für diese Eigenschaft. Bei mehr als einer Stil-Eigenschaft für einen Tag werden die einzelnen Stil-Eigenschaften mit einem Semikolon getrennt. In unserem Beispiel erhält body zwei Eigenschaften: "color" für die allgemeine Textfarbe und "background" für die Farbe des Seitenhintergrundes. Ich empfehle, das Semikolon immer zu setzen, auch nach der letzten Eigenschaft.

Farben können mit Namen oder numerischen Werten angegeben werden, z.B. rgb(255, 204, 204)für ein fleischiges Rosa. Die 3 Zahlen stehen für Rot, Grün und Blau und beschreiben die jeweilige Farbstärke zwischen 0 und 255. Genausogut können Sie aber auch eine Hexadezimale Angabe verwenden und den selben Farbton mit #FFCCCC erreichen. Weitere Details zu Farben folgen in einem späteren Abschnitt.

Achten Sie darauf, das Style-Element ausschließlich im head des Dokumentes zu platzieren, dort wo sich auch das title-Element befindet. Es sollte keinesfalls im body stehen.

Auf ein externes Style Sheet verweisen

Immer wenn Sie die gleiche Formatvorlage für verschiedene Seiten Ihres Webs verwenden möchten, empfiehlt es sich, ein einziges separates Style Sheet anzulegen, auf das von jeder Seite aus mit einem Link verwiesen wird. Dies erreichen Sie folgendermaßen:

<link type="text/css" rel="stylesheet" href="style.css">

Das link-Tag wird innerhalb des <head> ... </head>-Elements platziert. So sieht eine HTML-Datei mit einem Link zu einem externen Stylesheet aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Den Titel Ihres Dokumentes hier einfügen </title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

Den Inhalt Ihres Dokumentes hier einfügen

</body>
</html>

Das rel-Attribut des LINK-Elements erhält den Wert "stylesheet", um dem Browser zu verstehen zu geben, dass das href-Attribut die Web-Adresse (URL) Ihres Stylesheets ist. Eine einfache Stylesheet-Datei könnte dann folgendermaßen aussehen:

/* style.css - ein einfaches Stylesheet */
body {
  margin-left: 10%; margin-right: 10%;
  color: black; background: white;
}

Die selbe HTML-Datei kann dabei zu einem externen Stylesheet verlinken und gleichermaßen ein STYLE-Element mit zusätzlichen Styles spezifisch für Ihre Seite enthalten. Sofern Sie das LINK-Element in der Reihenfolge vor dem STYLE-Element setzen, können Sie mit dem Letzteren die Styles aus dem verlinkten Stylesheet überschreiben.

Seitenränder setzen

Webseiten sehen i.A. besser aus, wenn sie größere Seitenränder erhalten. Sie können den linken und rechten Rand mit den Stil-Eigenschaften "margin-left" und "margin-right" bestimmen, z.B.

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
</style>

Hier werden beide Seitenränder immer auf 10% der Fensterbreite gesetzt, unabhängig davon, ob Sie Ihr Browserfenster vergrößern oder verkleinern.

Linke und rechte Einzüge

Um Überschriften noch mehr hervorzuheben, können Sie sie in den Randbereich des bodys einrücken, z.B.

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
  h1 { margin-left: -8%;}
  h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

Dieses Beispiel hat drei Style Rules: eine für den body, eine für h1 (die oberste Überschrift) und eine für die übrigen Überschriften (h2, h3, h4, h5 und h6). Die Ränder der Überschriften sind zum body-Rand hinzuzufügen, wobei hier die Überschriften wegen negativer Werte links vom definierten body-Rand beginnen.

In den folgenden Abschnitten stehen die Beispiele der einzelnen Style Rules entweder innerhalb des style-Elementes im head der Seite (falls vorhanden) oder in einem verlinkten externen Style Sheet.

Oberen und unteren Leerraum kontrollieren

In Bezug auf den Leerraum ober- und unterhalb von Überschriften, Absätzen usw. machen die Browser ihren Job ziemlich gut. Zwei Gründe, dies doch selbst kontrollieren zu wollen, sind: Sie möchten einen größeren Abstand vor einer besonderen Überschrift oder einem wichtigen Absatz, oder Sie wollen generell eine genaue Kontrolle für die Abstände.

Die Stil-Eigenschaft "margin-top" beschreibt einen Abstand nach oben und "margin-bottom" einen Abstand nach unten. Um soetwas für alle h2-Überschriften festzulegen, können sie folgendes schreiben:

h2 { margin-top: 8em; margin-bottom: 3em; }

Die Einheit em ist besonders geeignet, da sie zusammen mit der Größe der Schrift skaliert. Ein em ist dabei genau die Höhe der Schrift. Wenn Sie em benutzen, bewahren Sie das generelle Erscheinungsbild der Webseite - unabhängig von der Schriftgröße. Das ist um einiges sicherer als die Verwendung von Pixel oder Point, da diese Alternativen immer Probleme für Anwender bereiten, die große Schriften zum Lesen Ihres Textes benötigen.

Points spielen gewöhnlich in Textverarbeitungs-Anwendungen eine Rolle, z.B. 10pt Text. Unglücklicherweise werden gleiche Point-Angaben von den verschiedenen Browsern unterschiedlich wiedergegeben. Was auf einem Browser noch wunderbar aussieht, kann auf einem anderen Browser unlesbar werden! Bei Verwendung von em vermeiden Sie solche Probleme.

Um den Abstand für eine ganz bestimmte Überschrift zu definieren, müssen Sie diese Überschrift gesondert benennen. Sie erreichen dies mit einem class-Attribut im Markup, z.B.

<h2 class="unterrubrik">Start</h2>

Die Style Rule hierzu sieht dann folgendermaßen aus:

h2.unterrubrik { margin-top: 8em; margin-bottom: 3em; }

Die Regel setzt sich zusammen aus dem Tag-Namen, einem Punkt und dem Wert des class-Attributes. Passen Sie dabei auf, kein Leerzeichen vor oder nach dem Punkt zu setzen: die Style Rule wird dann nicht funktionieren. Es gibt noch andere Möglichkeiten, die Stileigenschaften für ein Element an einer ganz bestimmten Stelle im Dokument zu bestimmen, allerdings ist das class-Attribut sehr flexibel.

Wenn einer Überschrift ein Absatz folgt, wird der Wert für margin-bottom von der Überschrift nicht dem Wert für margin-top des Absatzes hinzugefügt. Es wird lediglich der größere der beiden Werte für den Abstand zwischen Überschrift und Absatz berücksichtigt. Diese Besonderheit betrifft margin-top und margin-bottom ungeachtet der Tags, die hierfür benutzt werden.

Erstzeilen-Einzug

Vielleicht möchten Sie einmal die erste Zeile eines jeden Absatzes einrücken. Folgende Style Rule ahmt nach, wie Absätze traditionell in Romanen beginnen:

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

Sie rückt die erste Zeile eines jeden Absatzes um 2 em ein und unterdrückt gleichzeitig den sonst üblichen Abstand zwischen den einzelnen Absätzen.

Schrift einstellen

Dieser Abschnitt erklärt, wie Schrifttyp und -größe eingestellt werden und wie Sie kursiv, fett und andere Stileigenschaften hinzufügen können.

Schriftstil

Sehr häufige Stilarten sind die kursive und fette Textdarstellung. Die meisten Browser geben das em-Tag in kursiv und das strong-Tag in fett wieder. Nehmen wir einmal an, Sie möchten em in fett-kursiv und strong in fetten Großbuchstaben haben:

em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase;  font-weight: bold; }

Falls Sie die Neigung verspüren, können Sie auch wie folgt Ihre Überschriften in Kleinbuchstaben wiedergeben:

h2 { text-transform: lowercase; }

Schriftgröße einstellen

Die meisten Browser verwenden für wichtigere Überschriften eine größere Schrift. Wenn Sie die Standardeinstellung der Schriftgröße überschreiben, laufen Sie Gefahr, daß Ihr Text zu klein zum Lesen wird - insbesondere bei der Verwendung von Point. Ich empfehle Ihnen deshalb, Schriften immer in relativen Größen anzugeben.

Das folgende Beispiel gibt die Überschriften-Größe in Prozent an, und zwar relativ zur Schriftgröße von normalem Text:

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }

Schriftart einstellen

Höchstwahrscheinlich ist die von Ihnen favorisierte Schriftart nicht auf allen Browsern installiert. Als Ausweg können Sie verschiedene Schriften in der von Ihnen bevorzugten Reihenfolge aufführen. Weiterhin gibt es einige generische Schriftnamen, die garantiert zur Verfügung stehen, weshalb Sie am Ende Ihrer Auflistung immer eine dieser Schriftfamilien angeben sollten: serif, sans-serif, cursive, fantasy oder monospace. Zum Beispiel:

body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }

Bei diesem Beispiel sollen die wichtigsten Überschriften vorzugsweise in Garamond angezeigt werden, falls dies nicht geht, in Times New Roman, und wenn auch das nicht möglich ist, letztendlich in der Standard-Serifenschrift des Browsers. Text in normalen Absätzen soll in Verdana, und falls dies nicht möglich ist, in der standardmäßigen serifenlosen Schrift des Browsers angezeigt werden.

Die Lesbarkeit verschiedener Schriften hängt im allgemeinen eher von der Höhe der Kleinbuchstaben als von der Schriftgröße selbst ab. Schriftarten wie Verdana sind viel besser zu lesen als Schriftarten wie z.B. "Times New Roman" und sollten deshalb für normalen Absatz-Text bevorzugt verwendet werden.

Vermeiden Sie Probleme mit Schriften und Rändern

Meine erste Regel ist es, innerhalb der body-Ebene Text zu vermeiden, der nicht in ein Block Level Element (Blockebene-Element) wie p eingeschlossen ist. Zum Beispiel:

<h2>Frühling in Wiltshire</h2>

Blüte auf den Bäumen, Vogelgesang und das Gemecker
der Lämmer auf den Feldern.

Der Text nach der Überschrift riskiert, von einigen Browsern mit ungewollter Schrift und falschem Rand wiedergegeben zu werden. Sie sollten deshalb daran denken, solchen Text immer in einen Absatz einzuschließen, z.B.

<h2>Frühling in Wiltshire</h2>

<p>Blüte auf den Bäumen, Vogelgesang und das Gemecker
der Lämmer auf den Feldern.</p>

Meine zweite Regel lautet, die Schriftfamilie für pre -Elemente anzugeben, da einige Browser es vergessen, eine Festbreitenschrift zu verwenden, sobald Sie eine Schriftgröße oder andere Eigenschaften für pre definiert haben.

pre { font-family: monospace; }

Meine dritte Regel lautet, die Schriftfamilie für Überschriften-, p- und ul-Elemente anzugeben, falls Sie beabsichtigen, Rahmen oder Hintergrund für Elemente wie div festzulegen. Dieser Work-Around ist für einen Bug, bei dem die Browser vergessen, auch hier die vererbte (inherited) Schriftfamilie zu verwenden und stattdessen zu der in den Browsereinstellungen definierten Standardschrift wechseln.

h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }

Rahmen und Hintergrund hinzufügen

Sie können sehr einfach einen Rahmen um eine Überschrift, eine Liste, einen Absatz oder auch um die ganze Gruppe legen, wenn Sie diese Elemente mit einem div -Element umschließen. Zum Beispiel:

div.kasten { border: solid; border-width: thin; width: 100% }

Beachten Sie, daß einige Browser bei fehlender "width"-Eigenschaft den rechten Rand zu weit nach rechts stellen. Das ganze kann im Markup dann wie folgt angegeben werden:

<div class="kasten">
Der Inhalt innerhalb dieses DIV-Elementes ist eingeschlossen
in einen Kasten mit einer dünnen Linie drumherum.
</div>

Es gibt eine begrenzte Auswahl an Rahmenarten: dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt), groove (3 D-Hohlkehle), ridge (3 D-Wulst), inset (3 D-Vertiefung), outset (3 D-Erhebung) und none (ohne). Die Eigenschaft border-width bestimmt die Rahmenbreite. Gültige Werte hierfür sind thin, medium und thick, aber auch eine bestimmte angegebene Breite wie z.B. 0.1em. Mit der Eigenschaft border-color geben Sie eine Rahmenfarbe an.

Ein hübscher Effekt ist es, den Hintergrund eines Kastens mit einer durchgehenden Farbe oder einem gekachelten Bild zu versehen. Dies erreichen Sie mit der Eigenschaft background. Den mit div eingeschlossenen Kasten können Sie dann wie folgt füllen:

  div.color {
    background: rgb(204,204,255);
    padding: 0.5em;
    border: none;
  }

Ohne eine explizite Angabe für die Eigenschaft border werden einige Browser lediglich den Hintergrund der gegebenen Zeichen einfärben. Die Eigenschaft padding erzeugt einen Abstand zwischen der Außenkante des eingefärbten Bereiches und dem in ihm enthaltenen Text.

Sie können padding-Werte für links, oben, rechts und unten angeben mit den Eigenschaften padding-left, padding-top, padding-right und padding-bottom, z.B. padding-left: 1em.

Angenommen Sie wollen nur auf einigen Seiten einen Rahmen. Dann können Sie die Rahmen-Eigenschaften für jede einzelne Seite mit den Eigenschaften-Familien border-left, border-top, border-right und border-bottom unabhängig definieren - jeweils in Verbindung mit dem passenden Suffix: style, width oder color, z.B.

  p.hinweis {
    padding-left: 0.2em;
    border-left: solid;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left-width: thin;
    border-color: red;
  }

womit ein roter Rahmen auf der linken Seite von jedem Absatz erzeugt wird, der im Markup die Klasse "hinweis" enthält.

Farben zuweisen

Einige Beispiele für das Definieren von Farben wurden weiter oben bereits behandelt. Hier nochmal eine kurze Auffrischung:

  body {
    color: black;
    background: white;
  }
  strong { color: red }

Schwarzer Text auf weißem Hintergrund wird als Standard gesetzt, mit strong hervorgehobene Elemente werden hingegen rot dargestellt. Es gibt 16 Standard-Farbnamen, die ich weiter unten erkläre. Sie können auch dezimale Zahlenwerte für rot, grün und blau verwenden, bei denen jeder Wert einen Bereich von 0 bis 255 einnimmt, z.B. ist rgb(255, 0, 0) das gleiche wie red. Ebenfalls dürfen Sie hexadezimale Farbwerte angeben, die mit einer Raute '#' eingeleitet werden, gefolgt von sechs hexadezimalen Ziffern. Ein Umrechner zwischen RGB- und Hex-Farbwerten steht weiter unten zur Verfügung.

Linkfarben setzen

Mit CSS können Sie unterschiedliche Farben für Ihre Hyperlinks definieren, z.B. eine Farbe für Links, denen Sie noch nicht gefolgt sind, eine andere Farbe für bereits besuchte Links, und eine aktive Farbe für den gerade angeklickten Link. Sogar für den Augenblick, wenn der Mauszeiger sich über dem Link befindet, können Sie eine Farbe bestimmen.

  :link { color: rgb(0, 0, 153) }  /* für unbesuchte Links */
  :visited { color: rgb(153, 0, 153) } /* für besuchte Links */
  :hover { color: rgb(0, 96, 255) } /* wenn die Maus über dem Link ist */
  :active { color: rgb(255, 0, 102) } /* wenn der Link angeklickt ist */

Vielleicht wollen Sie auch einmal Ihre Hyperlinks ohne Unterstrich darstellen. Dazu müssen Sie die Eigenschaft text-decoration auf none setzen, zum Beispiel:

  a.einfach { text-decoration: none }

was den Unterstrich für Links wie den folgenden unterdrücken würde:

Dies ist <a class="einfach" href="irgendwas.html">nicht unterstrichen</a>

Die meisten Leute erwarten auf einer Webseite einen Hyperlink, wenn sie unterstrichenen Text sehen. Sie tun also gut daran, Hyperlinks unterstrichen zu lassen. Ähnlich sieht es für die Linkfarben aus: die meisten Leute halten unterstrichenen blauen Text für Hyperlinks. Es ist also auch ratsam, die Linkfarben unangetastet zu lassen, es sei denn, die Hintergrundfarbe würde den Text in solch einem Fall schwer lesbar machen.

Farbblindheit

Wenn Sie Farben verwenden, denken Sie daran, daß 5 bis10% der Menschheit in irgendeiner Form von Farbblindheit betroffen sind. Dies kann für solche Personen Schwierigkeiten verursachen, zwischen Rot und Grün oder Gelb und Blau zu unterscheiden. In seltenen Fällen besteht auch die Unfähigkeit, irgendeine Farbe zu erkennen. Sie sollten es daher unbedingt vermeiden, Farbkombinationen für Vorder- und Hintergrund zu wählen, die es für Menschen mit Farbblindheit schwer machen, Ihren Text zu lesen.

Farbnamen

Der Standardsatz an Farbnamen ist: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, und Yellow. Diese 16 Farben sind in HTML 3.2 und 4.01 definiert und entsprechen den VGA-Grundfarben auf PCs. Die meisten Browser akzeptieren zwar auch einen erweiterten Farbnamenssatz, von dessen Gebrauch ist aber abzuraten.

Farbnamen und sRGB-Werte
black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF"

Wie Sie sehen, ist der Farbwert "#800080" das gleiche wie "purple".

Hexadezimale Farbwerte

Werte wie "#FF9999" stellen Farben als hexadezimale Zahlen für Rot, Grün und Blau dar. Die ersten beiden Zeichen nach der Raute # geben die Zahl für Rot wieder, die nächsten beiden für Grün und die letzten beiden für Blau. Diese Zahlen bewegen sich immer im Dezimalbereich 0 bis 255. Wenn Sie die dezimalen Werte wissen, können Sie sie ganz einfach in eine hexadezimale Zahl konvertieren, indem Sie z.B. einen Taschenrechner verwenden, wie er auch Bestandteil von Microsoft Windows ist.

Geben Sie RGB- oder Hex-Wert ein und klicken Sie für eine Konvertierung auf den passenden Button
rot: Hex-Farbwert
grün:
blau:

Browsersichere Farben

Neue Computer unterstützen zwar Tausende oder gar Millionen von Farben, viele ältere Farbsysteme können allerdings nur bis zu 256 Farben gleichzeitig anzeigen. Um damit zurechtzukommen, behelfen sich die Browser auf solchen Systemen mit einer festen Farbpalette. Das Ergebnis ist oft ein gesprenkeltes Bild, da der Browser versucht, für jeden Punkt im Bild eine Annäherung an die tatsächliche Farbe zu erreichen. Dieses Problem wird allmählich verschwinden, wenn die älteren Computer durch neue Modelle ersetzt wurden.

Die meisten Browser unterstützen die gleiche sogenannte "browsersichere" Farbpalette. Diese Palette verwendet 6 gleichmäßig aufgeteilte Abstufungen für Rot, Grün und Blau und deren Kombinationen. Wenn Sie nur Farben von dieser Palette auswählen, können Sie diesen Sprenkel-Effekt vermeiden. Für den Hintergrund von Bildern ist dies besonders nützlich.

Wenn der Browser die browsersichere Palette verwendet, erscheint der Seitenhintergrund in der ähnlichsten Farbe aus der Palette. Sofern Sie den Seitenhintergrund mit einer Farbe eingestellt haben, die nicht aus der browsersicheren Palette stammt, riskieren Sie für den Hintergrund unterschiedliche Farben, abhängig davon, ob der Computer indizierte oder True-Color-Farben benutzt.

Die browsersichere Palette setzt sich aus den Farben zusammen, bei denen Rot, Grün und Blau auf folgende Werte beschränkt sind:

RGB 00 51 102 153 204 255
Hex 00 33 66 99 CC FF

Folgende Tabelle zeigt Ihnen die browsersicheren Farben mit den entsprechenden Hex-Werten. Mein Dank an Bob Stein für diese Zusammenstellung.

FFF
 FFF
CCC
 CCC
999
 999
666
 666
333
 333
000
 000
FFC
 C00
FF9
 900
FF6
 600
FF3
 300
99C
 C00
CC9
 900
FFC
 C33
FFC
 C66
FF9
 966
FF6
 633
CC3
 300
CC0
 033
CCF
 F00
CCF
 F33
333
 300
666
 600
999
 900
CCC
 C00
FFF
 F00
CC9
 933
CC6
 633
330
 000
660
 000
990
 000
CC0
 000
FF0
 000
FF3
 366
FF0
 033
99F
 F00
CCF
 F66
99C
 C33
666
 633
999
 933
CCC
 C33
FFF
 F33
996
 600
993
 300
663
 333
993
 333
CC3
 333
FF3
 333
CC3
 366
FF6
 699
FF0
 066
66F
 F00
99F
 F66
66C
 C33
669
 900
999
 966
CCC
 C66
FFF
 F66
996
 633
663
 300
996
 666
CC6
 666
FF6
 666
990
 033
CC3
 399
FF6
 6CC
FF0
 099
33F
 F00
66F
 F33
339
 900
66C
 C00
99F
 F33
CCC
 C99
FFF
 F99
CC9
 966
CC6
 600
CC9
 999
FF9
 999
FF3
 399
CC0
 066
990
 066
FF3
 3CC
FF0
 0CC
00C
 C00
33C
 C00
336
 600
669
 933
99C
 C66
CCF
 F99
FFF
 FCC
FFC
 C99
FF9
 933
FFC
 CCC
FF9
 9CC
CC6
 699
993
 366
660
 033
CC0
 099
330
 033
33C
 C33
66C
 C66
00F
 F00
33F
 F33
66F
 F66
99F
 F99
CCF
 FCC
CC9
 9CC
996
 699
993
 399
990
 099
663
 366
660
 066
006
 600
336
 633
009
 900
339
 933
669
 966
99C
 C99
FFC
 CFF
FF9
 9FF
FF6
 6FF
FF3
 3FF
FF0
 0FF
CC6
 6CC
CC3
 3CC
003
 300
00C
 C33
006
 633
339
 966
66C
 C99
99F
 FCC
CCF
 FFF
339
 9FF
99C
 CFF
CCC
 CFF
CC9
 9FF
996
 6CC
663
 399
330
 066
990
 0CC
CC0
 0CC
00F
 F33
33F
 F66
009
 933
00C
 C66
33F
 F99
99F
 FFF
99C
 CCC
006
 6CC
669
 9CC
999
 9FF
999
 9CC
993
 3FF
660
 0CC
660
 099
CC3
 3FF
CC0
 0FF
00F
 F66
66F
 F99
33C
 C66
009
 966
66F
 FFF
66C
 CCC
669
 999
003
 366
336
 699
666
 6FF
666
 6CC
666
 699
330
 099
993
 3CC
CC6
 6FF
990
 0FF
00F
 F99
66F
 FCC
33C
 C99
33F
 FFF
33C
 CCC
339
 999
336
 666
006
 699
003
 399
333
 3FF
333
 3CC
333
 399
333
 366
663
 3CC
996
 6FF
660
 0FF
00F
 FCC
33F
 FCC
00F
 FFF
00C
 CCC
009
 999
006
 666
003
 333
339
 9CC
336
 6CC
000
 0FF
000
 0CC
000
 099
000
 066
000
 033
663
 3FF
330
 0FF
00C
 C99
009
 9CC
33C
 CFF
66C
 CFF
669
 9FF
336
 6FF
003
 3CC
330
 0CC
00C
 CFF
009
 9FF
006
 6FF
003
 3FF

Farbmuster mit der browsersicheren Palette sind bei www.visibone.com für viele populäre Grafikpakete frei erhältlich.

Was ist mit Browsern, die CSS nicht unterstützen?

Ältere Browser vor Netscape 4.0 und Internet Explorer 4.0 unterstützen CSS entweder überhaupt nicht oder sehr inkonsequent. Für diese Browser können Sie das Aussehen Ihrer Webseite auch mit HTML selbst beeinflussen.

Farbe und Hintergrund festlegen

Die generelle Farbeinstellung können Sie im BODY-Tag vornehmen. Das folgende Beispiel setzt die Hintergrundfarbe auf weiß und die Textfarbe auf schwarz.

<body bgcolor="white" text="black">

Das Element BODY steht noch vor dem sichtbaren Inhalt der Webseite, also auch vor der ersten Überschrift. Ebenso können Sie hier die Farbe Ihrer Hyperlinks festlegen. Dafür gibt es drei Attribute:

  • link für unbesuchte Links
  • vlink für besuchte Links
  • alink für die Farbe, wenn Sie auf den Link klicken

Bei diesem Beispiel werden alle drei Linkfarben gesetzt:

<body bgcolor="white" text="black"
  link="navy" vlink="maroon" alink="red">

Weiterhin können Sie den Browser dazu bringen, den Seitenhintergrund mit einem Bild zu kacheln, indem Sie das background-Attribut mit der Netzadresse des Bildes verwenden, z.B.

<body bgcolor="white" background="hintergrund.jpeg" text="black"
  link="navy" vlink="maroon" alink="red">

Es ist immer eine gute Idee, mit dem bgcolor-Attribut zusätzlich eine Hintergrundfarbe anzugeben, falls der Browser einmal das Bild nicht anzeigen kann. Sie sollten dabei aufpassen, daß die von Ihnen gewählte Farbe keine Leseschwierigkeiten verursacht. Ein Extremfall kann folgendes sein:

<body bgcolor="black">

Die meisten Browser zeigen Text standardmäßig schwarz an. Das Resultat in diesem Falle wäre schwarzer Text auf schwarzem Hintergrund! Viele Menschen leiden auch unter der einen oder anderen Form von Farbblindheit, und so kann zum Beispiel ein Olivgrün für manche Leute braun erscheinen.

Ein anderes Problem tritt auf, wenn Sie versuchen, solch eine Webseite auszudrucken. Viele Browser ignorieren hierbei die Hintergrundfarbe und berücksichtigen nur die Textfarbe. Wenn der Text jetzt auch noch auf weiß gesetzt wurde, ist ein leeres Blatt beim Ausdruck das Endresultat. Deshalb ist folgendes nicht zu empfehlen:

<body bgcolor="black" text="white">

Das bgcolor-Attribut können Sie auch für Tabellen-Zellen verwenden, z.B.

<table border="0" cellpadding="5">
 <tr>
  <td bgcolor="yellow">farbige Tabellen-Zelle</td>
 </tr>
</table>

Tabellen sind für zahlreiche Layout-Effekte gut und werden auch ausreichend dahingehend mißbraucht. Künftig wird diese Rolle den Style Sheets zufallen, die ein präzises Layout mit weitaus weniger Aufwand erreichen.

Schriftart, -größe und -farbe bestimmen

Mit dem FONT-Tag können Sie eine Schriftart auswählen sowie deren Größe und Farbe vorschlagen. Das folgende Beispiel wählt die Farbe aus:

Dieser Satz hat ein <font color="yellow">Wort</font> in gelb.

Das face-Attribut wählt die Schriftart, üblicherweise mit einer Auflistung von Schriftarten in bevorzugter Reihenfolge, z.B.

<font face="Garamond, Times New Roman">irgendein Text ...</font>

Das size-Attribut kann dazu verwendet werden, eine Schriftgröße mit einer Zahl zwischen 1 und 7 auszuwählen. Wenn Sie ein - oder + Zeichen vor diese Zahl setzen, wird das als relativer Wert interpretiert. Nehmen Sie size="+1" für den nächstgrößeren Schriftgrad und size="-1" für den nächstkleineren Schriftgrad, z.B.

<font size="+1" color="maroon"
  face="Garamond, Times New Roman">irgendein Text ...</font>

Es gibt ein paar Dinge, die Sie unbedingt vermeiden sollten: Wählen Sie keine Farbkombinationen, die es farbenblinden Menschen unmöglich machen, Ihren Text zu lesen. Verwenden Sie niemals das font-Tag, um normalen Text wie eine Überschrift erscheinen zu lassen. Überschriften sollten immer mit den Tags h1 bis h6 gekennzeichnet werden, passend zu der entsprechenden Wichtigkeit.

Wo bekomme ich weitere Informationen?

Um weitere Informationen zu CSS und unterstützende Werkzeuge zu erhalten, sollten Sie zur W3C Homepage für CSS gehen. Dort finden Sie auch Buchtipps zu HTML und CSS, zum Beispiel "Raggett on HTML 4", erschienen 1998 bei Addison Wesley. Schauen Sie sich auch "Beginning XHTML" an, erschienen 2000 bei Wrox Press. Für eine detailliertere Ausführung zu CSS empfehle ich "Cascading Style Sheets" von Håkon Wium Lie und Bert Bos, erschienen 1999 bei Addison Wesley, wo Sie einen tiefen Einblick in CSS von den Entwicklern der Sprache selbst erhalten.

Ich habe vor, diese Einführung mit weiteren Seiten zu CSS-Positionierung, -Druck und Aural Style Sheets (Style Sheets für Sprachausgabe) auszubauen.

Viel Glück und beginnen Sie jetzt mit CSS!

Copyright  ©  1994-2004 W3C ® (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.