Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.
Wie binde ich Cascading Style Sheets (CSS) ein
CSS kann sehr unterschiedlich in eine Webseite eingebunden werden. Der folgende Beitrag beschreibt diese Möglichkeiten kurz und erklärt, wann sie eingesetzt werden.
CSS direkt im HTML-Element einbinden
Man kann in jedem HTML-Element mit dem style-Attribut CSS-Angaben einbinden. Das Schema hierfür sieht folgendermaßen aus:
<p style="CSS-Element:Wert;"> </p>
Jede CSS-Angabe wird mit einem Element, gefolgt von einem Doppelpunkt, dem hierfür vorgesehenen Wert und einem abschließenden Semikolon (Strichpunkt) angegeben. Selbstverständlich können innerhalb des style-Attributs auch mehrere CSS-Eigenschaften definiert werden:
<p style="background-color:#cdcdcd; color:#001737;"> </p>
Diese Angaben würden z.B. definieren, dass dieses p-Element einen hellgrauen Hintergrund und eine dunkelblaue Schriftfarbe hat.
CSS im Kopfbereich der HTML-Datei definieren
Alternativ zum direkten Formatieren eines Elements, kann man auch zentrale CSS-Angaben im Kopfbereich des Dokuments definieren. Hierfür nutzt man das style-Element innerhalb von <head> und </head>.
Damit klar ist, um welchen Datentyp es sich handelt, muss im öffnenden style-Element der MIME-Typ text/css notiert werden.
<style type="text/css">
<!--
/* Bereich für die CSS-Angaben */
-->
</style>
Im Gegensatz zur direkten Formatierung muss hier nun erst das jeweilige HTML-Element gefolgt von einer öffnenden und einer schließenden geschwungenen Klammer angegeben werden. Innerhalb der Klammern werden wie bei der Direktformatierung die CSS-Angaben geschrieben.
<style type="text/css">
<!--
p {
background-color: #cdcdcd;
color: #001737;
}
-->
</style>
Diese Angabe würde definieren, dass alle p-Elemente dieses Dokuments mit einem hellgrauen Hintergrund und einer dunkelblauen Schriftfarbe versehen sind.
Übrigens: die in den Beispielen genutzten HTML-Kommentare sind mittlerweile überflüssig. Sie wurden für diejenigen Browser eingeführt, die kein CSS verstehen, aber die CSS-Datei einlesen würden. Bekannt ist von diesen Browsern nur Netscape 3 (!).
CSS als separate Datei verlinken
Im Gegensatz zu den vorhergehenden Beispielen definiert man die CSS-Angaben mit der folgenden Methode seitenübergreifend. Man nutzt so z.B.eine separate Datei mit den Formatierungen für sämtliche Unterseiten eines Internetauftritts und profitiert davon, Änderungen nur in einer einzigen Datei ausführen zu müssen.
Die Datei wird innerhalb von <head> und </head> mit dem link-Element referenziert. Innerhalb des link-Elements werden die Attribute rel (mit dem Wert stylesheet), href (mit der Angabe des Dateipfades), type (mit der MIME-Angabe text/css) und title (mit einer Bezeichnung für das Stylesheet) verwendet.
<link rel="stylesheet" type="text/css" href="beispiel.css" title="Standard-Layout">
Diese Angaben würden festlegen, dass die referenzierte Datei beispiel.css heißt, auf der gleichen Dateiebene liegt wie die anderen Dokumente und die Angaben für das Standard-Layout enthält.
Die CSS-Angaben werden innerhalb diese Datei im gleichen Stil angegeben, wie bei der zentralen Formatierung.
Fazit
Obwohl es mehrere Möglichkeiten der Einbindung gibt, sollte man möglichst die Variante mit der externen Datei nutzen. Nur so kann die Trennung von Inhalt/Struktur und Layout konsequent durchgeführt werden.
Manchmal erscheint eine direkte oder zentrale Formatierung innerhalb des HTML-Dokuments als der einfachere Weg. Langfristig erschwert man sich jedoch die Fehlersuche bzw. verlängert Aktualisierungsprozesse, da man dazu gezwungen ist, jedes Dokument einer Webseite zu öffnen und zu durchsuchen anstatt sämtliche Änderungen gebündelt in der CSS-Datei durchzuführen.
Kommentare
Enrico Reinsdorf
am 17.12.2005 - 01:19
Ein sehr schön geschriebener Artikel.
Im Fazit empfiehlst du alle Styleangaben in externe Dateien auszulagern. Meine Erfahrung hat mir gezeigt, dass das Einbetten einer individuellen Formatierung direkt in die HTMLund sie wird schneller geladen. Auch wird dadurch der Aktualisierungsprozess nicht unbedingt erschwert, da jede Seite sowieso geprüft werden muss.
Anmerkung:
Vielleicht hätte man noch beim Link-Tag zum externen Einbinden von Stylesheets das Atribut media mit erklären können.
Boda
am 05.03.2006 - 01:10
Die CSS Angaben direkt in HTML einbinden erhöht den Wartungsaufwand erheblich. Eine CSS Datei für das Seitenlayout und eine CSS Datei für Text Formatierung ist sinnvoll. Wer Geschwindigkeitsprobleme im Browser erwartet kann CSS im Server dynamisch einbinden. Die meisten Browser lesen jedoch das CSS nur einmal und speichern es in Cache, nur bei einem reload wird CSS neu gelesen.
Die Kommentare sind geschlossen.