CSS

Inhalt und Form

Es ist bei größeren Webprojekten immer sinnvoll, Inhalt und Form zu trennen. Dadurch ist es möglich, das Aussehen des gesamten Projektes mit wenigen Handgriffen zu verändern, ohne dabei jede einzelne Webseite überarbeiten zu müssen.

Eine bequeme Möglichkeit stellen Cascading Stylesheets (CSS) dar. Es handelt sich dabei um Textdateien mit Formatierungsangaben, die per Link im Kopf der jeweiligen HTML-Seite eingebunden werden.

HTML-Datei mit CSS verlinken

Im folgenden Beispiel befindet sich die CSS-Datei standard.css im Unterverzeichnis layout, das sich im übergeordneten Verzeichnis in Relation zur HTML-Datei befindet (d.h. um von der HTML-Datei zur CSS-Datei zu gelangen, muss man erst eine Verzeichnisebene hoch und dann in das Unterverzeichnis layout abtauchen). Der erforderliche Quellcode in der HTML-Datei ist angenehm kurz:

...
<head>
<link rel="stylesheet" href="../layout/standard.css" type="text/css">
</head>
...

Formatierungsangaben in der CSS-Datei

Die CSS-Datei ist wie gesagt eine einfache Textdatei, der man sinnvollerweise die Endung .css gibt. Sie enthält zeilenweise Formatierungsangaben nach folgendem Schema:

Tagbezeichnung {Attribut_1:Attributwert; Attribut_2:Attributwert; ...; }

Um zum Beispiel alle <h1>-Überschriften dunkelblau, zentriert und mit Schriftgröße 24 zu setzen, schreibt man folgende Zeile in die CSS-Datei:

h1 {color:#000080; text-align:center; font-size:24pt; }

Klassenangaben

Zusätzlich zum Zuweisen von Eigenschaften zu HTML-Tags ist es möglich, Klassen zu definieren, die im HTML-Quelltext mit der Angabe <Tag class="Klassenname"> zugewiesen werden können. Im laufenden Text können Passagen mit dem Tag <span class="Klassenname">zu formatierender Text</span> eingebunden werden.

Die Definition von Klassen erfolgt in der CSS-Datei wie folgt:

.Klassenname {Attribut_1:Attributwert; Attribut_2:Attributwert; ...; }

Aufgaben

  1. Arbeite die zu dieser Webseite gehörende CSS-Datei standard.css durch.
  2. Ergänze dein Webprojekt um eine einfache CSS-Datei und binde sie in alle HTML-Dokumente ein. Weiterführende Informationen zu CSS findest du unter http://de.selfhtml.org/css/index.htm.