Es ist bei größeren Webprojekten immer sinnvoll, Inhalt und Form zu trennen. Dadurch ist es möglich, das Aussehen des gesamten Projektes mit wenigen Handgriffen zu verändern, ohne dabei jede einzelne Webseite überarbeiten zu müssen.
Eine bequeme Möglichkeit stellen Cascading Stylesheets (CSS) dar. Es handelt sich dabei um Textdateien mit Formatierungsangaben, die per Link im Kopf der jeweiligen HTML-Seite eingebunden werden.
Im folgenden Beispiel befindet sich die CSS-Datei standard.css im Unterverzeichnis layout, das sich im übergeordneten Verzeichnis in Relation zur HTML-Datei befindet (d.h. um von der HTML-Datei zur CSS-Datei zu gelangen, muss man erst eine Verzeichnisebene hoch und dann in das Unterverzeichnis layout abtauchen). Der erforderliche Quellcode in der HTML-Datei ist angenehm kurz:
...
<head>
<link rel="stylesheet" href="../layout/standard.css" type="text/css">
</head>
...
Die CSS-Datei ist wie gesagt eine einfache Textdatei, der man sinnvollerweise die Endung .css gibt. Sie enthält zeilenweise Formatierungsangaben nach folgendem Schema:
Tagbezeichnung {Attribut_1:Attributwert; Attribut_2:Attributwert; ...; }
Um zum Beispiel alle <h1>-Überschriften dunkelblau, zentriert und mit Schriftgröße 24 zu setzen, schreibt man folgende Zeile in die CSS-Datei:
h1 {color:#000080; text-align:center; font-size:24pt; }
Zusätzlich zum Zuweisen von Eigenschaften zu HTML-Tags ist es möglich, Klassen zu definieren, die im HTML-Quelltext mit der Angabe <Tag class="Klassenname"> zugewiesen werden können. Im laufenden Text können Passagen mit dem Tag <span class="Klassenname">zu formatierender Text</span> eingebunden werden.
Die Definition von Klassen erfolgt in der CSS-Datei wie folgt:
.Klassenname {Attribut_1:Attributwert; Attribut_2:Attributwert; ...; }