20.12.2008
CSS-Styleangaben einbinden
Der Sinn und große Vorteil von CSS ist, dass Inhalt und Formatierung einer Website getrennt werden. Damit wird der reine HTML-Quelltext äußerst übersichtlich und somit auch weniger fehleranfällig.
Dennoch muss eine Verbindung zwischen Inhalt und Format hergestellt werden. Hierzu gibt es im wesentlichen drei Methoden, die nachfolgend erläutert werden:
1. Einbindung innerhalb des Headbereichs
Die Styleangaben für die einzelnen Elemente könnnen innerhalb des Headbereichs einer Seite eingefügt werden. Hierzu schreibt man folgenden Tag in den Headbereich der HTML-Datei, z.B. vor dem schließenden </head> und definiert innerhalb dessen sämtliche Styleangaben:
<style type="text/css">
body {
font-family: Verdana;
font-size: 100%;
background-color: #ADFF2F;
}
</style>
Diese Methode hat jeoch folgenden großen Nachteil: Ihr müsst die Styleangaben auf jeder einzelnen Seite der Homepage einfügen. Wollt ihr später einige Formatierungen ändern oder zusätzlich einfügen, dann müsst ihr dies mit dieser Methode auf jeder einzelnen Seite vornehmen, was recht aufwendig ist.
Deshalb ist die folgende Methode viel einfacher und effektiver.
2. Einbindung einer externen CSS-Datei
Werden sämtliche Styleangaben in einer externen CSS-Datei zusammengefasst, so können künftige Änderungen dort zentral vorgenommen werden. Es ist dann nicht mehr erforderlich, in jeder einzelnen HTML-Seite die CSS-Angaben zu ändern.
Zu diesem Zweck öffnen wir mit einem beliebigen Editor eine leere Datei und speichern sie zum Beispiel als "style.css" ab. Verwendet als Speicherort am besten den Ordner, in dem sich die index.html befindet. Ansonsten müsst ihr den nachgenannten Pfad entsprechend anpassen. Per Editor werden dann in diese Datei alle Styleangaben erfasst, jedoch ohne den unter 1. genannten Style-Tag:
body {
font-family: Verdana;
font-size: 100%;
background-color: #ADFF2F;
}
Nun muss noch eine Verbindung zwischen der HTML-Datei und der CSS-Datei hergestellt werden, damit die Formatierungen durchschlagen.
Hierzu fügen wir innerhalb des Headbereichs des HTML-Dokuments folgenden Code ein:
<link rel="stylesheet" type="text/css" href="style.css">
Bei Verwendung eines XHTML-Doctypes:<link rel="stylesheet" type="text/css" href="style.css" />
Das war's dann auch schon. Wenn dieser Verweis auf allen Seiten eingefügt ist, dann schlagen sämtliche Angaben der CSS-Datei auf alle HTML-Dokumente durch.
3. Direkte Einbindung beim jeweiligen HTML-Element
Man kann die Style-Angaben auch direkt beim Aufruf des jeweiligen Elements im HTML-Quelltext definieren.
Wird der Body geöffnet, dann ergänzen wir <body> um seine entsprechenden Styleangaben. Das sieht dann so aus:
<body style="font-family: Verdana; font-size: 100%; background-color: #ADFF2F;">
Auch das ist eine Möglichkeit, sollte jedoch nur im Einzelfall und als Ausnahme angewandt werden. Zum Beispiel dann, wenn eine Formatierung nur äußerst selten oder speziell vorkommt, und es sich nicht lohnt, deshalb die CSS-Datei anzupassen.
Grundsätzlich sollten wir soweit möglich das Instrument einer ausgelagerten CSS-Datei nutzen und sämtliche CSS-Styleangaben in einer externen CSS-Datei hinterlegen. Schließlich ist unser Ziel ein knackig kurzer und übersichtlicher Quelltext, möglichst ohne Formatierungen. Dafür haben wir ja unsere CSS-Datei.