Da wir mit CSS-Anweisungen angeben wollen, wie Elemente eines HTML-Dokuments angezeigt werden sollen, müssen wir die CSS-Anweisungen irgendwie mit dem HTML-Dokument in Verbindung bringen. Von den folgenden drei Möglichkeiten werden wir im weiteren Verlauf dieses Kurses nur die erste benutzen.
Externe Stilvorlage
Bei dieser Variante haben wir unsere CSS-Anweisungen in einer eigenen Datei gespeichert (z.B. guterstil.css). Einen Verweis auf diese Datei fügen wir dann im HTML-Dokument ein, welches anschließend wie so aussehen kann:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Externe Stilvorlagen</title>
<meta charset="utf-8">
<link rel="stylesheet" href="guterstil.css">
</head>
<body>
...
</body>
</html>Die entscheidende Zeile, in der wir mitteilen, welche Stilvorlage eingebunden werden soll, ist die Zeile
<link rel="stylesheet" href="guterstil.css">Sie verlinkt eine externe Datei mit dem HTML-Dokument und gibt an, in was für einer Relation diese Datei mit dem HTML-Dokument steht (mit dem rel-Attribut). In diesem Fall wird ausgedrückt, dass das verlinkte Dokument eine Stilvorlage ist. Die verlinkte Datei wird im href-Attribut angegeben.
Befindet sich die CSS-Datei in einem anderen Verzeichnis als die HTML-Datei, so muss der Pfad zu diesem Verzeichnis vor dem Dateinamen noch eingefügt werden (wie bei Links in HTML). Befindet sich das Stylesheet zum Beispeil im Ordner stilvorlagen, so muss die obige Zeile geändert werden zu:
<link rel="stylesheet" href="stilvorlagen/guterstil.css">Interne Stilvorlage
Wir können unsere CSS-Anweisungen auch direkt in das HTML-Dokument schreiben. Hierbei kann allerdings schnell das Problem entstehen, dass das HTML-Dokument unübersichtlich wird. Entscheiden wir uns dennoch für diese Möglichkeit, so können wir ebenfalls im Kopfbereich des HTML-Dokuments einen weiteren Tag einbauen, nämlich den <style>-Tag. Zwischen <style> und </style> schreiben wir dann unsere CSS-Anweisungen:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Interne Stilvorlagen</title>
<meta charset="utf-8">
<style>
/* meine CSS-Anweisungen */
</style>
</head>
<body>
...
</body>
</html>Verwendung des style-Attributs
Bei der dritten und letzten Möglichkeit, CSS-Anweisungen in ein HTML-Dokument einzufügen, ergänzen wir direkt das HTML-Element, das wir formatieren möchten, mit CSS-Stilanweisungen (deshalb spricht man hier von inline-Stilangaben). Die CSS-Anweisungen müssen dazu in das style-Attribut eingetragen werden. Das HTML-Dokument könnte dann folgendermaßen aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Interne Stilvorlagen</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="...">Stilvolle Überschrift</h1>
</body>
</html>In diesem Beispiel wird die Überschrift Stilvolle Überschrift mit eigenen Stilvorschriften versehen.