Einbindung von CSS-Angaben

CSS-Angaben können in einem XHTML-Dokument direkt abgelegt werden oder auch in eine externe Datei ausgelagert werden. Die einzelnen Möglichkeiten werden hier vorgestellt:

1) Im Dokumentenkopf
Im <head>-Bereich eines XHTML-Dokuments kann ein – theoretisch – umfangreiches Stylesheet abgelegt werden.
Der Befehl <style></style> umschließt die CSS-Angabe, dass es sich um eine CSS-Angabe handelt erkennt der Browser durch das Attribut type mit dem Wert text/css. Die Kommentar-Tags verstecken die CSS-Angaben vor alten Browsern:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Seitentitel </title>

<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
line-height: 16pt;
color: #000000;
}

h1 {
font-size: 14pt;
color: #666666;
padding-bottom: 0pt;
padding-top: 15pt;
margin: 1pt;
}
-->
</style>

</head>
<body>
Inhalte
</body>
</html>

CSS-Angaben, die im Dokumentenkopf festgelegt wurden, gelten für das gesamte XHTML-Dokument.

So sieht's aus

 

 
2) Elemente formatieren

Bei Bedarf kann zusätzlich zu den bestehenden CSS-Angaben Elementen (also Tags) im XHTML-Code direkt eigene Stile zugewiesen werden. Hierzu wird ein/der XHTML-Tag erweitert um das Attribut style, welches als Wert die entsprechenden Eigenschaften+Werte erhält.

An Stelle von
<p> <font size="+1" color="blue"> Text </font></p>
jetzt:
<p style="font-size:14pt; color: blue"> Text </p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Seitentitel </title>

<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
line-height: 16pt;
color: #000000;
}
-->
</style>

</head>
<body>
<h1 style="font-size: 24pt; color: #00ff00"> Eine Überschrift </h1>
Ein Flie&szlig;text, der keinen konkreten Inhalt hat.
</body>
</html>

Die so eingesetzten CSS-Auszeichnungen gelten ausschließlich für das so ausgezeichnete, einmalige Element. Sie gelten für keine anderen Elemente (es sei denn, sie befinden sich innerhalb des so erweiterten Tags als Verschachtelung, dann werden die Stilangaben ggf. vererbt).
 

 
3) Abschnitte formatieren
Durch die Verwendung von Class- oder ID-Selektoren können beliebige, frei definierbare Abschnitte selektiv ausgezeichnet werden. Hierzu dient das Attribut class (oder id), dem als Wert ein vorher definierter Class-Selektor (oder ID-Selektor) zugewiesen wird.

Das Attribut "class" oder "id" kann in Standard-XHTML-Tags eingefügt werden:
<p class="zitat"> "Sein oder nicht sein, das ist hier die Frage" </p>

Will man den "Auswirkungen" bestehender Tags möglichst aus dem Weg gehen, kann der Befehl <span></span> in Kombination mit "class" (oder "id") verwendet werden. So können beliebige Abschnitte frei von strukturellen Vorgaben definiert werden. Der Befehl <span> ohne eine class-Zuweisung hat keine formatierenden Auswirkungen im Browser. Der Befehl <div> zeichnet den Inhalt als Absatz aus (was einen einfachen Zeilenumbruch zur Folge hat).

Die Auszeichnung durch eine Klasse oder ID bezieht sich immer nur auf den Inhalt, der von dem so erweiterten Tag umschlossen wird. Bei der Verwendung von Klassen kann eine Klasse auch mehrfach im XHTML-Dokument verwendet werden, bei Bedarf sogar auf verschiedene Tags.
 

 
4) Externe Stylesheets
Bisher haben wir verschiedene Verfahren kennen gelernt, wie wir CSS-Angaben in ein Dokument einfügen. Diese Techniken ermöglichen es uns jedoch nur, innerhalb eines XHTML-Dokuments Auszeichnungen vorzunehmen. Möchten wir eine weitere XHTML-Datei mit den identischen CSS-Stilen erweitern, müssten wir sie ebenfalls in den Dokumentenkopf einfügen. Was bei ein/zwei Dokumenten noch praktikabel sein kann, wird zum Problem, wenn eine Website aus 20, 30 und mehr XHTML-Dokumenten besteht. Müsste nach Erstellung ein Wert innerhalb der CSS-Definition geändert werden, so müsste man jedes Dokument öffnen und jeweils die Änderung vornehmen. Dies kann jedoch vermieden werden, und hier zeigt sich auch das echte Potential von CSS und seine Vorteile: die Auslagerung von CSS-Angaben in ein eigenständiges CSS-Dokument.

In diese externe CSS-Datei (mit der Endung .css) werden alle Selektoren und Eigenschaften eingetragen und können hier zentral verwaltet werden. Nun muss jedes XHTML-Dokument mit dem CSS-Dokument verknüpft werden. Empfängt der Browser nun ein XHTML-Dokument mit einer solchen CSS-Verknüpfung, empfängt er die externe CSS-Datei automatisch mit und wertet sie vor Anzeige des XHTML-Dokuments aus. Dieses CSS-Dokument wird daraufhin vom Browser im lokalen Cache auf dem Clientrechner abgelegt (d.h. es wird nicht bei jedem Seitenaufruf erneut geladen) und so bei jeder neu abgerufenen, damit verknüpften XHTML-Seite angewendet. Diese Verknüpfung wird immer im Dokumentenkopf angelegt. Es gibt zwei technische Wege, eine Verknüpfung zu externen CSS-Dateien herzustellen:

1) Verknüpfung mit XHTML
Die Verknüpfung mit XHTML erfolgt im Dokumentenkopf. Es handelt sich um einen allein stehenden Befehl, der dem Browser den Typ und Pfad zur externen Datei mitteilt.

<link rel="stylesheet" type="text/css" href="stilangaben.css" />

link leitet eine Verknüpfung ein, das Attribut rel stellt den Bezug her und das Attribut type definiert den MIME-Typ. Im Attribut href wird der Pfad zum externen Stylesheet eingetragen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Seitentitel </title>

<link rel="stylesheet" type="text/css" href="stilangaben.css" />

</head>
<body>
<h1> Eine Überschrift </h1>
Ein Flie&szlig;text, der keinen konkreten Inhalt hat.
</body>
</html>

2) Verknüpfung mit CSS
Auch die Verknüpfung mit CSS wird in den Dokumentenkopf des XHTML-Dokuments eingetragen:

<style type="text/css">
<!--
@import url(stilangaben.css);
-->
</style>

Die @import-Anweisung weist den Browser auf ein verknüpftes Stylesheet hin, als Wert von url wird (in Klammer) der Pfad zur externen CSS-Datei angegeben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Seitentitel </title>

<style type="text/css">
<!--
@import url(stilangaben.css);
-->
</style>

</head>
<body>
<h1> Eine Überschrift </h1>
Ein Flie&szlig;text, der keinen konkreten Inhalt hat.
</body>
</html>

Interessant: @import kann auch in externe CSS-Dateien eingetragen werden, d.h. beim Laden einer CSS-Datei, die einen @import-Befehl zu einer weiteren externen CSS-Datei enthält, ruft der Browser auch diese zweite Datei ab.

Es können beliebig viele externe CSS-Dateien mit einem XHTML-Dokument verknüpft sein (was vor allem dann Sinn macht, wenn verschiedene Stilvorgaben für unterschiedliche Ausgabemedien (Screen, Print, Handheld etc.) angelegt werden.

Grundsätzlich können in XHTML-Dokumente verlinkte/importierte CSS-Dateien kombiniert werden mit speziellen CSS-Angaben im Kopf einer XHTML-Datei (bei @import ist zu beachten, dass diese zusätzlichen Angaben auf jedem Fall NACH dem Import-Befehl aufgelistet werden). Hierbei gelten die Regeln der Rangfolge.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Seitentitel </title>

<style type="text/css">
<!--
@import url(stilangaben.css);
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
line-height: 16pt;
color: #000000;
}

-->
</style>

</head>
<body>
<h1> Eine Überschrift </h1>
Ein Flie&szlig;text, der keinen konkreten Inhalt hat.
</body>
</html>