Wenn man mehrere HTML-Dokumente gleich layouten will, ist es aufwendig in jeder einzelnen HTML-Datei das CSS im
HEAD anzugeben.
Man denke nur an eine Style-Änderung, welchem man in 100 HTML-Seiten einpflegen muss - das macht nicht glücklich
sondern unproduktiv.
Daher kann man eine eigene CSS-Datei anlegen in welcher der Text steht der sonsts zwischen dem
style-Tag
stehen würde.
Um diese Datei in einer oder mehreren HTML-Datei zu verwenden muss man im HEAD-Bereich nur mit einem
<link>-Tag darauf verweisen.
Eine HTML-Datei kann auch mehrere CSS-Dateien verwenden.
Wichtig im
<link>-Tag sind folgende Attribute:
- rel mit dem Wert stylesheet
- type mit dem Wert text/css
- link mit der relativen oder absoluten URL zum Stylesheet
Somit ergibt sich also:
<link rel="stylesheet" type="text/css" href="URL.css"></link>
Beispiel:
Diese Seite verwendet folgende Style-Sheets.
Die ersten drei verwenden
absolute URLS und könnten somit von jedem genau so eingebunden werden.
Das letzte Style-Sheet hat eine
lokale URL.
Versuchen Sie es: kopieren Sie die ersten drei
link-Tags in eine ihrer HTML-Dateien und betrachten
Sie den Unterschied in der Browser-Darstellung.
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="http://www.holzers-familie.de/css/normalize.css"></link>
<link rel="stylesheet" type="text/css" href="http://www.holzers-familie.de/css/main.css"></link>
<link rel="stylesheet" type="text/css" href="http://www.holzers-familie.de/css/my.css"></link>
<link rel="stylesheet" type="text/css" href="./html.css"></link>
...
</head>
<body>
....
</body>