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.