Eine Webseite mit Stildefinitionen versehen

Problem

Sie wollen wissen, wie Sie die vorgestellten Rezepte in einer Webseite nutzen können.

Lösung 1

Verwenden Sie ein externes Stylesheet. Hierfür müssen Sie eine zusätzliche Textdatei erstellen, die Sie mit der Dateiendung .css versehen. Der Inhalt ist denkbar einfach:

/* externes Stylesheet */
p { font-family: sans-serif; }

Das ist tatsächlich schon alles. Anstatt die Regeln direkt in der HTML-Datei zu definieren, wie in der zweiten Lösung gezeigt, stehen die Stildefinitionen in einer eigenen Datei. Damit der Browser Ihre Regeln auch "sieht", müssen Sie im HTML-Dokument einen Verweis auf die Stylesheet-Datei anlegen. Dies ist die bei Weitem häufigste Methode, Stylesheets in eine Webseite einzubinden.

Für dieses Beispiel gehen wir davon aus, dass Ihr Stylesheet im selben Verzeichnis liegt wie die HTML-Datei und unter dem Namen externes_stylesheet.css gespeichert wurde.

Um das Stylesheet einzubinden, erweitern Sie den head-Teil des HTML-Dokuments um ein passendes link-Tag, wie hier gezeigt:

<!DOCTYPE html>
<html>
<head>
<title>CSS Info</title>
<link href="/externes_stylesheet. css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Dieser Absatz wird in einer serifenlosen Schrift dargestellt.</p>
</body>
</html>

Dieses Vorgehen zahlt sich aus, sobald Sie mehr als ein HTML-Dokument mit den gleichen Stilen versehen müssen. Anstatt die CSS-Regeln in jeder Webseite zu wiederholen, reicht es aus, das externe Stylesheet per <link>-Tag einzubinden. Sie müssen also nicht jede einzelne Seite warten, sondern können die Änderungen in einer zentralen CSS-Datei vornehmen.

Info

Beachten Sie, dass das HTML-Tag <style> ... </style> in der externen CSS-Datei nicht verwendet wird. Auch HTML-Kommentare haben in einer solchen Datei nichts zu suchen.

Eine weitere Möglichkeit, externe Stylesheets einzubinden, besteht in der Verwendung einer @import-Direktive:

<!DOCTYPE html>
<html>
<head>
<title>CSS Info</title>
<style>
@import url("externes_stylesheet.css");
</style>
</head>
<body>
<p>Dieser Absatz wird in einer serifenlosen Schrift dargestellt.</p>
</body>
</html>

Da es sich bei der @import-Anweisung um CSS-Code handelt, muss diese Anweisung im HTML-Dokument von style-Tags umgeben werden. Ein weiterer Vorteil liegt darin, dass Sie auf diese Weise noch andere Stylesheets einbinden. So könnte die Datei externes_ stylesheet.css weitere @import-Anweisungen enthalten, die zusätzliche CSS-Dateien laden.

Hierbei sollten Sie sich darüber klar sein, dass jede zusätzlich eingebundene CSS-Datei separat vom Server angefordert werden muss, was die Ladezeit der Webseite erhöhen kann.

Info

Während der Entwicklung einer Website kann es hilfreich sein, die CSS-Regeln für verschiedene Aspekte der Website in eigenen Dateien zu sichern. Im Produktionsbetrieb können Sie die Ladezeit verringern, indem Sie die Regeln in einer gemeinsamen Datei speichern. (Noch schneller geht es, wenn Sie die Datei serverseitig beispielsweise mit Gzip komprimieren.)

Lösung 2

CSS Allgemein - Eine Webseite mit Stildefinitionen versehen

Verwenden Sie ein internes Stylesheet (siehe Abbildung Lösung 2). Hierfür versehen Sie den head-Teil Ihres HTML-Dokuments mit <style> ... </style>-Tags. Zwischen den Tags können Sie nun Ihr Stylesheet definieren. Hier ein einfaches Beispiel:

<!DOCTYPE html>
<html>
<head>
<title>CSS Info</title>
<style type="text/css">
p { font-family: sans-serif; }
</style>
</head>
<body>
<p>Dieser Absatz wird in einer serifenlosen Schrift dargestellt.</p>
</body>
</html>

Info

Das Verwenden des type-Attributs im öffnenden style-Tag ist nicht verpflichtend. Wenn Sie Ihr Stylesheet mit einem Validierungsdienst wie   CSS-Validator überprüfen, erhalten Sie aber möglicherweise eine entsprechende Warnung, wenn das Attribut nicht angegeben wurde.

Lösung 3

Verwenden Sie Inline-Stile, die mithilfe des Attributs style direkt in den Markup-Code eingebettet werden. Unsere Beispielseite könnte etwa so aussehen:

<!DOCTYPE html>
<html>
<head>
<title>CSS Info</title>
</head>
<body>
<p style="font-family: sans-serif;">Dieser Absatz wird in einer serifenlosen Schrift dargestellt.</p>
</body>
</html>

Anstatt die Stile in einem internen oder externen Stylesheet zu definieren, stehen sie in diesem Fall direkt im HTML-Code. Das kann in seltenen Ausnahmefällen recht praktisch sein. Meistens überwiegen die Nachteile den Nutzen jedoch deutlich.

Diskussion

Die drei verschiedenen Arten von Stylesheets sind:

Extern

Mithilfe von link-Tags bzw. @import-Anweisungen können Sie externe CSS-Dateien in Ihre Webseiten einbinden. Diese dürfen ausschließlich CSS-Code enthalten. Mit externen Stylesheets können Sie Stile für mehrere Seiten auf einmal definieren, ohne die Regeln neu formulieren zu müssen. Das heißt, eine Änderung im externen Stylesheet wirkt sich automatisch auf alle Seiten aus, die die CSS-Datei einbinden.

Im Prinzip können Sie übrigens so viele link-Tags oder @import-Anweisungen verwenden, wie Sie wollen. Allerdings sollten Sie sich darüber klar sein, dass der Browser jedes eingebundene Dokument einzeln vom Webserver anfordern muss.

Der Autor Steve Souders empfiehlt in seinem Buch High Performance Websites (deutsche Ausgabe, O'Reilly, 2007), die link-Methode zu verwenden, um die Dateien parallel anstatt nacheinander zu laden.

Info

Beachten Sie, dass per url() definierte Pfadangaben im Stylesheet, z.B. für Hintergrundbilder, immer vom Stylesheet aus angegeben werden. Liegen Ihre CSS-Dateien beispielsweise in einem Unterverzeichnis, müssen Sie dies bei der Angabe der Dateipfade berücksichtigen.

Intern

Wie in Lösung 2 gezeigt, werden interne Stylesheets direkt im head-Teil eines HTML-Dokuments definiert. Hier können Sie Stile für alle Elemente der betreffenden Seite angeben. Das kann sinnvoll sein, wenn andere Seiten diese Angaben nicht zu sehen bekommen sollen oder wenn Sie die Auswirkungen Ihrer Definitionen zuerst im kleinen Rahmen testen wollen. Sobald Sie die Regeln in mehr als einem HTML-Dokument wiederverwenden möchten, empfiehlt sich jedoch die Benutzung eines externen Stylesheets.

Zwischen den <style> ... </style>-Tags dürfen keine weiteren HTML-Elemente stehen. Dieser Bereich ist ausschließlich für CSS-Code reserviert.

Inline

Inline-Stile werden als style-Attribut innerhalb von HTML-Tags definiert. Ihre Gültigkeit beschränkt sich auf den Inhalt des Tags, in dem sie definiert wurden. Die Verwendung von Inline-Stile wird in der Regel vermieden, da sie die Trennung von Inhalt und Darstellung untergraben. Sollten Sie davon ausgehen, dass Sie die Stildefinitionen ändern oder wiederverwenden werden, empfiehlt sich der Gebrauch von id-Attributen zusammen mit internen oder externen Stylesheets.