seite02.html: CSS im <head>-Bereich einbinden

Schritt 2.2: CSS im <head>-Bereich einer HTML-Datei

Um CSS-Anweisung nur für ein HTML-Dokument (dort aber überall) gültig zu machen, können Sie die Anweisungen in den <head>-Bereich einfügen. (Zeilen 9 - 15)

<!-- Dateiname: test.html -->

<html>
<head>
<title>Grundgerüst einer HTML-Datei</title>
<meta name="author" content="Steffen Wenzel">
<link rel="stylesheet" type="text/css" href="test.css">

<style type="text/css">

H1 {
   color: #0000a0;
}

</style>

</head>
<body>

<h1>Überschrift</h1>

<p>Fließtext, nichts als Fließtext</p>

</body>
</html>

Früher hat man die Angaben im style-Kontainer mit Kommentarzeichen (<!-- -->) versehen um alte Browser, die CSS nicht interpretieren daran zu hindern alles als Text auszugeben. Solche Browser gibt es aber nicht mehr und HTML-Validatoren geben Fehler aus, weil sie nur einen leeren Kontainer sehen.

Ansonsten wird genau dieselbe Formatierung verwendet wie sie schon im externen Stylesheet benutzt wird. Natürlich können Sie auch nur CSS-Angaben im Head-Bereich verwenden und müssen nicht immer auch ein separates Stylesheet benutzen. Das ist aber ratsam, da Sie nicht jede Datei bearbeiten müssen, wenn Sie Änderungen vornehmen.

Die Datei sieht jetzt also in Ihrem Browser folgendermaßen aus:

Die Überschrift ist jetzt blau