CSS mit HTML verbinden
Es gibt verschiedene Möglichkeiten, um CSS-Angaben (Cascading Style Sheets) in eine Webseite einzubinden. Wenn Sie allerdings Wert auf Qualität und einfache Wartung legen, bleibt nur eine Variante übrig.
Variante 1: Einbindung als Inline-CSS
Die Stylesheet-Angaben werden direkt an die jeweiligen Tags geschrieben.
Beispiel:
<head>
</head>
<body>
<h1 style="margin-top:10px;color:#cc0033;">Überschrift 1</h1>
</body>
</html>
Vorteile:
- Sie können in der Testphase schnell etwas ausprobieren
Nachteile:
- keine Trennung von Content und Design
- sehr hoher Wartungsaufwand
- wird schnell sehr unübersichtlich
Variante 2: Einbindung mittels <style>-Tag im Kopf einer HTML-Datei
Die Stylesheet-Angaben sind im <head>-Bereich einer jeden Seite notiert. Die vereinbarten Styles gelten hier für alle <h1>-Tags auf der jeweiligen Webseite.
Beispiel:
<head>
<style type="text/css">
h1 {
margin-top:10px;
color:#cc0033;
}
</style>
</head>
<body>
<h1>Überschrift 1</h1>
</body>
</html>
Vorteile:
- Sie können die Stylesheet-Angaben zentral an einer Stelle im Quellcode pflegen
- Änderungen an einem Style wirken sich sofort auf alle betroffenen Elemente (in diesem Fall alle <h1>-Überschriften) gleichzeitig aus
Nachteile:
- die zentralen Stylesheet-Angaben müssen im <head>-Bereich einer jeden Webseite gepflegt werden
- hoher Wartungsaufwand, da die Styles in den verschiedenen Webseiten möglichst synchron gehalten werden sollten
- Aufblähung des Quellcodes und dadurch längere Ladezeiten
- keine klare Trennung von Content und Design
Variante 3: Einbindung der CSS-Angaben als externe Datei
Auslagerung aller Stylesheet-Angaben in eine externe Datei und deren Einbindung im <head>-Bereich über das <link>-Tag. Die vereinbarten Styles gelten in diesem Beispiel für alle <h1>-Tags auf allen Webseiten, in denen die externe Stylesheet-Datei eingebunden ist.
Beispiel:
h1 {
margin-top:10px;
color:#cc0033;
}
Quellcode der dazugehörigen Webseite:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Überschrift 1</h1>
</body>
</html>
Vorteile:
- klare Trennung von Content und Design
- sehr einfache Wartung, da sich Änderungen an dieser zentralen Stylesheet-Datei auf alle Seiten auswirken, in die sie eingebunden ist
- geringe Ladezeiten, da die Stylesheet-Datei einmal geladen nachfolgend üblicherweise im Browser-Cache gehalten wird
- sehr übersichtlicher Quellcode
Nachteile:
- ein zusätzlicher Request
Empfehlung:
Versuchen Sie, wenn immer es möglich ist, die Stylesheet-Angaben in eine externe Datei auszulagern. Somit erzeugen Sie eine klare Trennung von Content und Design und die Wartung Ihrer Website wird erheblich vereinfacht bzw. beschleunigt.
Zusatztipp:
- Die Ladezeit kann nochmals verringert werden, indem Sie die Stylesheet-Datei komprimiert auf dem Webserver abgelegen.
- Ein guter und einfach zu bedienender Code-Kompressor ist z.B. der
YUI Compressor.