HTML und XHTML

strukturelles Markup

Style Sheets

Die Idee, die hinter den Style Sheets steckt, ist sehr einfach und ich hab sie auch schon ein paar Mal angetönt: Style Sheets bieten eine Möglichkeit, Inhalt und Darstellung eines HTML-Dokumentes voneinander zu trennen. Der strukturierte Inhalt bleibt dabei in der HTML-Datei und die Anweisungen zur Darstellung dieses Inhalts befinden sich im Style Sheet.

Wir werden in diesem Kurs keine Style Sheets erstellen, aber wir werden sehen, wie man eine Webseite mit einem Style Sheet verlinkt. In den Kursmaterialien befinden sich auch schon einige Style Sheets, die wir verwenden können. Eines davon werden wir jetzt einsetzen.

Wie schon gesagt, werden wir nur einen Link zum Style Sheet einrichten. Mit andern Worten: Wenn du jemals die Darstellung deiner Seite (oder einer ganzen Site mit hunderten von Seiten) verändern willst, genügt es, das an einem einzigen Ort zu tun: im Style Sheet.

Ganz schön effizient, das.

Früher gab's keinen andern Weg, als in jeder betroffenen Seite den HTML-Text anzupassen. Und wer heute noch versucht, mit HTML die Darstellung zu steuern, wählt weiterhin diesen mühseligen Weg.

Der Link, den du zu deinem Style Sheet machst, wird etwa so aussehen:


<html>

<head>

<title>die Pfefferschote</title>

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

</head>

Wir wollen uns hier noch gar nicht mit allen Details befassen. Ganz kurz gesagt befindet sich dieser Link im head eines HTML-Dokumentes und teilt dem Browser mit, er solle sich bei der Darstellung der Seite an die Vorgaben halten, die im genannten Style Sheet gemacht würden. Die Abkürzung CSS steht für Cascading Style Sheet und bezeichnet eine — genauer: die verbreitetste — Sprache, in der Style Sheets verfasst werden. Das href-Attribut, das wir im Zusammenhang mit Hyperlinks noch genauer studieren werden, teilt dem Browser mit, wo das Style Sheet abgelegt ist. Wenn du dieser Information noch nicht sicher folgen kannst, ist das weiter nicht tragisch, wir werden darauf im Zusammenhang mit Hyperlinks noch genauer eingehen.

Übung 6a

Füge nun diesen oben gezeigten Link in deine Seite index.html ein und sieh dir das Resultat in deinem Browser an. Beachte, dass der Wert des href-attributes Case Sensitiv ist und halte dich in der Gross/Kleinschreibweise an die Vorlage.

Unsere vorher doch recht nüchterne Seite sieht nun plötzlich so aus:

Überprüfe nun deine eigene Seite, nachdem du sie gespeichert hast.

Wenn sie dem, was wir eben gezeigt haben, nicht sehr ähnlich sieht, dann überprüfe nochmals

die Syntax des link-Elements
ob das link-Element auch wirklich im head steht
ob der Wert für href wirklich der gleiche ist wie in der Vorlage, inklusive Gross/Kleinschreibung

Um dir eine Vorstellung von den Möglichkeiten der Style Sheets zu geben, wollen wir den Link nun noch kurz auf ein anderes Style Sheet zeigen lassen. Du siehst dann, dass du die Darstellung ganzer Web-Sites mit einer Änderung des Style Sheets verändern kannst.

Übung 6b

Ändere den Namen des Style Sheets in dem Link, den du soeben eingefügt hast, auf stil2.css und dann auf stil3.css und sieh dir jedes Mal das Resultat im Browser an.

Für den Rest des Kurses kannst du mit dem Style Sheet weiterfahren, das dir am besten gefällt.

Übung 6c

Die Style Sheets sind im Verzeichnis style_sheets des Ordners pfefferschote abgelegt. Erstelle von dem, welches dir am besten gefallen hat, eine Kopie unter dem Namen stylesheet.css.

Da sämtliche künftigen Seiten bereits einen Link auf das Style Sheet stylesheet.css enthalten, werden sie alle in deiner bevorzugten Darstellung angezeigt werden. Allerdings werden wir bei den Lösungen, die hier im Kurs jeweils hinter dem Kamera-Symbol warten, weiterhin beim Style Sheet 1 bleiben.

Homepapa
März 2004

Vorheriger Abschnitt:
Absatz oder Paragraph

Nächster Abschnitt:
Block und Inline Elemente