Sie befinden sich hier:
» 
» 
02.12.2010

Einbinden von CSS in HTML

Kategorie(n): HTML und CSS Tipps

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:

<html>
<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:

<html>
<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:

Externe Datei styles.css mit folgendem Inhalt:

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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

7