Die Methode zur CSS-Gestaltung, die im vorigen Kapitel behandelt wurden, funktioniert zwar, ist aber bei großen Projekten umständlich und teilweise unübersichtlich. Das Design für eine voll funktionsfähige Website kann unter Umstände mehrere hunderte CSS-Blöcke enthalten und es wäre sehr umständlich, diesen Code in jedes HTML-Dokument Ihrer Website einzubauen. Außerdem würde dies die Wartung und Aktualisierung Ihres Designs sehr umständlich gestalten, da man bei geringfügigen Änderungen jede HTML-Datei bearbeiten müsste.
Aus diesem Grund empfiehlt es sich, den CSS-Code in eine externe Datei (.css) auszulagern und diese dann in jedes HTML-Dokument einzubinden.
Wir erstellen nun eine neue Datei und nennen Sie style.css. In diese Datei schreiben wir den CSS-Code unseres ersten Beispiels hinein (ohne <style>-Tags), also:
h1 {
color: red;
}
Nun werden wir das <style> im HTML-Dokument in ein Monotag verwandeln und mit dessen Hilfe die Datei einbinden. Das geht wie folgt:
<link rel=“stylesheet“ type=“text/css“ href=“[PFAD]“>
Sofern sich unsere CSS-Datei im selben Ordner befindet wie die HTML-Datei, sollte der Inhalt in HTML jetzt so aussehen:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<link rel=“stylesheet“ type=“text/css“ href=“style.css“>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin ein Absatz.</p>
</body>
</html>
Wenn alles geklappt hat, werden wir nun feststellen, dass der Designcode aus der CSS-Datei übernommen wird und die Überschriften rot sind. Wir können bei Bedarf mehrere verschiedene Stylesheets gleichzeitig in Ihr Dokument einbinden. Deren Inhalte werden dann in der Reihenfolge geladen, in der wir eingebunden werden (im Falle von Überschneidungen von CSS-Propertys gilt die zuletzt eingebundene Definition).