XML-Know How

CSS einbinden

Bevor wir uns der Syntax von CSS und damit der konkreten Formatierung von Webseiten und E-Books zuwenden, müssen wir noch klären, wie die CSS-Information in die HTML-Datei gelangt, so dass der Browser die entsprechenden Formatierungsregeln überhaupt kennt.

Merke

Es gibt insgesamt drei Möglichkeiten, eine HTML-Datei mit CSS-Stilen anzureichern:

  • Die Definition der CSS-Stile per style-Attribut
  • Die Angabe der CSS-Stile im style-Element
  • Das Einbinden der CSS-Stile über das link-Element

Die »unmittelbarste« Möglichkeit, einen CSS-Befehl abzusetzen, ist das style-Attribut. Es kann bei (fast) jedem HTML-Element eingesetzt werden und führt dazu, dass genau dieses Element eine spezifische Formatierung erhält:

Beispiel:

<p style="color:blue">Ich bin ein Absatz</p>

Diese Form der Formatierung ist die konkreteste, d. h. sie überschreibt in der Kaskade alle anderen Style-Informationen (Ausnahme: Im Stylesheet wird eine Regel ausdrücklich mit »!important« gekennzeichnet, dann überschreibt dies wiederum auch die Regeln aus den style-Attributen). Es ist aber auch die unsystematischste, von deren Gebrauch hier ausdrücklich abgeraten wird, solange es andere, systematischere Möglichkeiten der Formatierung gibt. Wird der HTML-Code direkt mit Stilinformationen angereichert, so ist die gewünschte Trennung von Struktur und Layout zerstört: Beide Informationen liegen wieder in einer Datei. Jede Korrektur erfordert den Eingriff direkt in den Content, eine Mehrfachverwertung wird deutlich erschwert.

Weitaus systematischer ist das Einbetten von Stilinformationen über das <style>-Element, das in den <head>-Bereich einer HTML-Datei geschrieben wird:

Beispiel:

<html>

<head>

<style type="text/css">

p {

color:blue;

}

</style>

</head>

(…)

</html>

Im <style>-Element lässt sich nicht nur eine einzelne Formatierungsregel, sondern ein komplettes CSS-Stylesheet abbilden. Die dort formulierten Regeln überschreiben die Voreinstellungen des Browsers, wirken sich dann auf die gesamte HTML-Datei aus und werden ihrerseits nur von CSS-Angaben in @style-Attributen überschrieben.

Für die Formatierung einer einzelnen HTML-Datei ist dieses Vorgehen gut – in dem Moment, wo wir (wie es auch bei E-Books in der Regel der Fall ist) mehrere HTML-Seiten nach demselben Stylesheet formatieren wollen, kommt aber auch diese Verfahren an seine Grenzen: In jede einzelne HTML-Datei müsste der CSS-Code einkopiert werden; bei Änderungen am Stylesheet müssten hunderte von HTML-Dateien korrigiert werden.

Deshalb gibt es noch die dritte und systematischste Variante: Die Einbindung der Stilinformationen per <link>-Element.

Das <link>-Element ist, genau wie das <style>-Element auch, ein Kindelement von <head>. Es enthält jedoch nicht die Stilinformationen selbst, sondern lediglich einen Verweis auf eine externe CSS-Datei:

Beispiel:

<html>

<head>

<link rel="stylesheet" media="screen" title="NameDesStylesheets" href="dateiname.css" type="text/css"/>

</head>

(…)

</html>

Auch hier gilt die Kaskadierungsregel: Das externe Stylesheet überschreibt die Angaben der browserinternen Initialwerte, es wird seinerseits von einem internen Stylesheet (mit <style>) überschrieben, das wiederum vom style-Attribut überschrieben werden kann.

Info:
Attribute des link-Elements

rel-Attribut:

  • Angabe der Beziehung des Dokuments
  • Browser erkennt: es gibt ein Stylesheet, das auf das Dokument angewendet werden soll

media-Attribut:

  • Angabe des Ausgabemediums, für welches das Stylesheet gilt
  • Bei Layout-Änderungen müssen mehrere Dokumente angepasst werden

href-Attribut:

  • Referenzieren des Stylesheets mittels URI (= Uniform Ressource Identifier. Zeichenfolge, die zur eindeutigen Identifikation einer Ressource dient – hier in der Regel in Form einer Web-Adresse.)

title-Attribut:

  • Gibt dem Stylesheet einen Namen
  • moderne Browser stellen dem Benutzer über den title alternative Stylesheets zur Auswahl

Die Verwendung eines externen Stylesheets und dessen Einbindung über das <link>-Element ist die systematischste Möglichkeit, HTML-Seiten und E-Books zu formatieren und wird hier für jede Form von Verlagscontent ausdrücklich empfohlen. Es ist sehr viel einfacher, eine zentrale CSS-Datei zu korrigieren, als in den HTML-Code vieler Seiten eingreifen zu müssen.

Einbetten mehrerer Stylesheets

Daneben besteht auch die Möglichkeit, mehrere externe Stylesheets einzubetten. Diese Technologie wird zur Zeit unter dem Schlagwort »responsives Layout« sehr vorangetrieben. Durch das Auslesen der Lesegeräte-Informationen ist es möglich, für jedes Lesegerät (Smartphone, Tablet-PC, Bildschirm) ein eigenes, optimiertes CSS bereitzustellen. Die selbe HTML-Seite sieht dann, je nach Ausgabegerät, möglicherweise völlig unterschiedlich aus. Diese Unterscheidung lässt sich sogar für die Ausrichtung des Lesegerätes vornehmen, also abhängig davon, ob ein Tablet-PC gerade im Hochformat oder quer gehalten wird.

Festgelegt wird das über das media-Attribut innerhalb des <link>-Elements. Das media-Attribut kann darüber hinaus aber auch noch weitere Werte annehmen. So lässt sich z. B. mit media=print ein eigenes Stylesheet für die Ausgabe der HTML-Seite auf dem Drucker hinterlegen, ebenso aber auch Ausgabeformen für Blindenschrift-Ausgabegeräte (media=braille), Sprachbrowser (media=aural) und andere.