Farbliche Gestaltung einer HTML-Seite
Trennung von Inhalt und Präsentation
Ein Internetauftritt besteht in der Regel aus einer Vielzahl einzelner HTML-Seiten. Um ein einheitliches Design zu erreichen, werden Formatvorlagen für die Darstellung der Seiteninhalte festgelegt. Anweisungen zum Design einer Internetseite innerhalb eines HTML-Tags widersprechen dem HTML-Standard.
Zu diesem Zweck wurde eine eigene Sprache entwickelt: Cascading Style Sheets (CSS). Es handelt sich also um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Style Sheets kann beispielsweise ausdrücklich bestimmt werden, dass eine Überschrift 1. Ordnung eine bestimmte Schriftfarbe haben soll.
Hierzu werden CSS-Anweisungen in einer separaten Datei mit der Dateiendung .css definiert. Anschließend wird diese Datei mit der gewünschten HTML-Datei verlinkt. Wenn man Angaben in der CSS-Datei ändert, wirken sich die Änderungen einheitlich auf alle damit verbundenen HTML-Dateien aus, in denen die CSS-Datei eingebunden ist.
So wird eine CSS-Datei in die HTML-Datei eingebunden:
<head>
<title>world of music - Startseite</title>
<link rel="stylesheet" href="format.css" type="text/css">
</head>
| Inhalt der Datei format.css | Erläuterung |
|---|---|
| /* DATEI: format.css */ h1 { color: red; } |
Das ist ein Kommentar. Für das <h1>-Tag gilt: Farbe rot |
Allgemeine Syntax:
Selektor {
Eigenschaft: Wert;
}