In vielen Fällen wird man einheitliche Formate für alle HTML-Dateien eines Projektes haben wollen. Hierbei braucht man die Angaben nicht in jeder Datei zu wiederholen. Statt dessen lassen sich Style-sheet-Angaben in einer separaten Textdatei notieren und diese einfach in jeder gewünschten HTML-Datei einbinden.
Bei dieser zu referenzierenden Datei muss es sich um eine reine Textdatei handeln, die den Suffix .css haben sollte. In ihr sind nur Formatdefinitionen enthalten, also auch keine HTML-Anweisungen. Etwa so:

font.f1 { font-size:14pt; font-family:Times; color:blue }
font.f2 { font-size:18pt; font-family:Arial; color:red }
...

Im HEAD-Bereich der HTML-Dateien wird nun diese CSS-Datei eingebunden:

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

Im Dateikopf der HTML-Datei wird mit dem Tag »link« die CSS-Datei referenziert, die die gewünschten Style-sheet-Angaben enthält. Darin sollten immer die Angaben »rel=stylesheet« und »type=text/css« stehen. Bei »href« wird die bezogene (ggf. mit ihrem Pfad) CSS-Datei notiert. Die Tags im HTML-Dokument lauten dann lediglich <font class="f1" usw.>. und werden mit </font> geschlossen
Die Vorteile liegen auf der Hand:
(a) die einzelnen HTML-Dateien können ggf. »schlanker« ausfallen, und vor allem
(b) eine Änderung im CSS-Dokument wirkt sich sofort einheitlich auf alle bezogenen HTML-Dateien aus.

Dennoch kann man in einem konkreten HTML-Dokument zusätzliche Style-Angaben machen, die sich dann nur auf dieses beziehen. Benutzt man beide Arten, haben diese im Konfliktfall Vorrang vor den referenzierten Formaten. So lassen sich ständig verwendete Formate importieren und andere für eine spezifische Seite überschreiben.

Zurück