Dies ist die deutsche Übersetzung des Tutorials zu CSS "Adding a touch of style" vom 8. April 2002 von Dave Raggett. Dave Raggett arbeitet für das World Wide Web Consortium (W3C) und ist einer der führenden Entwickler von HTML.
Die englischsprachige Originalversion dieses Dokumentes finden Sie auf den Seiten des W3C unter http://www.w3.org/MarkUp/Guide/Style.html. Diese Übersetzung steht auf https://siteform.de/tutorials/Style.html zur Verfügung. Eine Übersicht der Übersetzungen finden Sie auf Tutorials.
Ich habe mich bemüht, das Original sinnbewahrend wiederzugeben, dennoch kann diese Übersetzung Fehler enthalten oder veraltet sein.
Dieses Dokument ist urheberrechtlich geschützt. Copyright © 1994-2006 W3C ^® (MIT, INRIA, Keio), alle Rechte vorbehalten. Die Rechte an dieser Übersetzung liegen beim Übersetzer: Copyright © 2000 - 2024 René von Bulmerincq, Siteform.

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.