CSS-Einbaumöglichkeit 3: Als externe Datei

Mit zunehmender Seitenanzahl eines Webprojekts wird eine zentrale Verwaltung aller Formatierungen auch wichtiger. Niemand hat schließlich Zeit und Lust bei einem Projekt mit z.B. 1000 Einzelseiten während eines Designwechselns alle Schriften, Farben oder Layoutformatierungen auf jeder Seite oder in jedem Tag zu ändern. Dies geht auch einfacher, wie gleich gezeigt wird.

Alle CSS-Formatierungen können in einer seperaten Datei abgelegt werden um dann von beliebig vielen Seiten aufgerufen zu werden. Ändert man in der CSS-Datei etwas, wirken diese Änderungen auch unmittelbar auf allen verbundenen Seiten. Zusätzlich wird die Ladezeit minimal verbessert, da die Formatierungen nicht jedes Mal neu geladen werden müssen, sondern im Cache bleiben können.

Der Dateityp der externen CSS-Datei kann frei gewählt werden, wobei es sich eingebürgert hat diese mit den Dateiendungen .css oder .txt zu versehen. Das folgende Beispiel zeigt eine solche externe Datei sowie wie diese auf einer herkömmlichen Webseite eingebaut werden kann.

Externe CSS-Datei
body { font-size: 1em; color: #333333; }
h1 { color: green; }
*.beispiel { font-variant: small-caps; }
HTML-Datei
<html>
<head>
<link rel="stylesheet" type="text/css" href="datei.css" />
</head>
<body>

Webseiteninhalt...

</body>
</html>

Die externe CSS-Datei enthält CSS-Code wie man ihn aus dem <head>-Bereich und dem letzten Abschnitt kennt. Optional kann man auch hier die Auskommentier-Tags einfügen, was jedoch nicht zwingend notwendig ist.

Auf der eigentlichen Webseite muss im <head>-Bereich lediglich eine Codezeile eingetippt werden, die im Beispiel rot markiert ist. Es gibt hierfür mehrere Varianten, doch zeigte sich in der Praxis, dass die oben vorgestellte Variante idR. am besten ist. Abgesehen vom href sollte der Code immer genau so übernommen werden. In href kann dann wahlweise der Dateiname direkt (wenn die Datei im gleichen Verzeichnis ist), ein Dateipfad (wenn die Datei auf dem aktuellen Server ist) oder eine URI (wenn die Datei irgendwo ist) angegeben werden.

Häufig gestellte Fragen und Antworten
Ich habe auf allen meinen Seiten als Dateipfad ../../css/layout.css angegeben, doch irgendwie klappt es nicht bei allen Seiten, sondern nur denen im gleichen Verzeichnis?
Bei Webprojekten mit mehreren Verzeichnissen (und entsprechend unterschiedlichen Dateipfaden) sollte am besten immer eine komplette URI in Form von http://www... angegeben werden. Wenn man unbedingt den Dateipfad verwenden möchte, muss dieser für jeden Ordner geprüft werden.

So, nun wurde erklärt, wie man CSS in Webseiten einbauen kann. Fehlen nur noch einige schöne Beispiele, oder? Kein Problem - diese findet man natürlich auch bei PlanetHTML in der CSS-Tutorialübersicht

Zurück zur CSS-Übersicht...
©2001-2011 PlanetHTML und Robert R. Agular --- Impressum