CSS

Was sind Stylesheets?

Stylesheets dienen zum Formatieren von Webinhalten. Beim Erstellen und Verwalten von umfangreichen Web-Auftritten ermöglichen sie eine zentrale Formatdefinition und erleichtern so ein schnelles Ändern des Layouts.

Die Sprache CSS (Cascading Style Sheets) ergänzt HTML / XHTML. Ebenso wie HTML / XHTML ist CSS keine Programmiersprache. Während HTML Texte übersichtlich strukturiert, wird mit Stylesheets das Layout der Seiten festgelegt. Idealerweise werden auf diese Weise Form und Inhalt getrennt. Das Layout kann so festgelegt werden, dass es sich dem jeweiligen Ausgabemedium anpasst, zum Beispiel dem Bildschirm- oder Druckformat einer Webseite oder dem eines Mobiltelefons. Dadurch ist es nicht mehr nötig, für verschiedene Ansichten separate textgleiche Dateien anzulegen. Es genügt eine HTML-Datei, die Ausgabeoptionen werden mit Hilfe der CSS-Datei erzeugt.

CSS hat mehrere gestalterische Qualitäten. Erstens bietet es eine weit mehr Formatierungsmöglichkeiten als HTML selbst. Zweitens sind zentrale Vorlagen für beliebig viele Seiten verwendbar. Statt für jede Schriftänderung das <font>-Tag neu festzulegen, definiert man alle Formatanweisungen im voraus und kann immer wieder darauf zurückgreifen. Jedem HTML-Element lassen sich Vorlagen zuordnen, egal, ob es sich um den Dokumentkörper <body> oder eine Absatzmarke <p> handelt. Auch löst CSS Schwierigkeiten, die zum Beispiel bei der Verwendung von Frames oder Tabellen bei der Seitengestaltung auftraten. So können barrierefreie Webseiten mit Hilfe so genannter div-Container erstellt werden.

Grundsätzlich geht man dabei folgendermaßen vor: Ein Gestaltungsmerkmal, das sich durch mehrere Seiten zieht, muss nicht mehr jedes Mal komplett eingegeben werden. Wenn beispielsweise die Hauptüberschrift immer in einer bestimmten Schriftart und einer bestimmten Farbe erscheinen soll, wird das in einer CSS-Datei einmalig definiert. Von jeder Seite des Webauftritts kann auf die Gestaltungsdefinition zurückgegriffen werden.

Stylesheets in HTML einbinden

CSS-Definitionen werden meistens in den head-Bereich des HTML-Dokuments eingebunden. Eine CSS-Definition kann entweder direkt in die HTML-Datei eingebunden oder über eine separate Datei verlinkt werden.

Stylesheets in einer HTML-Datei definieren

Soll das Stylesheet nur für eine einzelne HTML-Datei angewendet werden, wird es innerhalb des Tags <head>..</head> definiert. Man verwendet dazu die Befehle <style type="text/css">...</style>. Dazwischen folgen die CSS-Angaben.

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
... Style Sheet-Angaben ...
//-->
</style>
</head>
<body>
...
</body>
</html>

Wichtig ist, die Stilangaben mit <!- - und --> auszukommentieren. Browser, die mit CSS umgehen können, verstehen diese Anweisung, ältere Browser ignorieren den Text dann einfach anstatt ihn anzuzeigen.

Externe Stylesheets

Beim Erstellen und Verwalten umfangreicher Web-Auftritte ist es sinnvoll, Stylesheets in einer eigenen, externen Datei abzulegen. Auf diese Weise können für eine Domain zentrale Stilvorlagen definiert werden, die auf allen Seiten wiederzufinden sind und die sich leicht modifizieren lassen. Das externe Stylesheet besteht aus einer Datei, die ausschließlich Style-Angaben enthält. Diese speichern Sie unter einem beliebigen Namen mit der Dateiendung .css ab, beispielsweise style.css.

In der HTML-Dateien wird dann auf das externe Style Sheet verweisen. Dies geschieht mit Hilfe eines link-Elements, dem drei Attribute zugewiesen werden:

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

Innerhalb der CSS-Datei wird ein Kommentar durch den Befehl /* (Schrägstrich und Asterisk) erzeugt. Beendet wird er in umgekehrter Reihenfolge, also durch */.

Syntax von Style Sheets

Die Formatierungsweise in CSS unterscheidet sich von der in HTML / XHTML üblichen. Anweisungen sind immer eine Einheit aus Element (sowie eventuell weiteren Klassifizierungen), seinen definierten Eigenschaften und den zugehörigen Werten. Die Eigenschaften stehen in geschweiften Klammern. Die Inhalte der Formatierung stehen nach einem Doppelpunkt. Innerhalb der geschweiften Klammern trennt ein Strichpunkt die einzelnen Angaben. Wie im folgenden Beispiel:

Element Klassizierung{ Eigenschaft: Wert; }
body.abc { color: red; }

Mit CSS kann einem HTML-Tag ein fester Stil zugewiesen werden, beispielsweise dem Tag <h1> eine bestimmte Schriftart und Schriftgröße. Alle Überschriften innerhalb das Tags <h1> werden auf der Webseite mit dieser Schriftart und -größe angezeigt. Im Quellcode sieht das folgendermaßen aus:

<style type="text/css">
<!--
h1 {
font-family:arial;
font-size:14pt;
}
//-->
</style>

Definieren von Klassen

Es ist auch möglich, verschiedene Varianten eines bestimmten HTML-Tags zu definieren, so genannte Klassen. Für die Überschrift <h1> beispielsweise soll eine Klasse mit der Schriftfarbe rot und eine mit der Farbe blau definiert werden. Ein Punkt hinter dem betreffenden Tag im CSS-Quelltext definiert eine Klasse. Ihr wird ein beliebiger Namen zugewiesen. Klassen lassen sich auch unabhängig von Tags definieren und können später jedem beliebigen Tag zugewiesen werden. In CSS sieht der Befehl folgendermaßen aus:

<style type="text/css">
<!--
h1.blau {
font-family:arial;
font-size:14pt;
color:blue;
}

h1.rot {
font-family:arial;
font-size:14pt;
color:red;
}

h1.gruen { color:green;
}
//-->
</style>

Um in einem Text eine CSS-Klasse zu verwenden, wird innerhalb des einleitenden HTML-Tags die Angabe class="die Klasse, die Sie definiert haben" notiert:

<h1 class="blau">Überschrift in blau</h1>

Definieren von unabhängigen Formaten

Ähnlich wie Klassen werden auch so genannte IDs definiert, die sich jedem beliebigen Tag zuordnen lassen. Statt des Punktes zum Zuweisen der Formateigenschaften wird hier das Rautezeichen verwendet:

<style type="text/css">
<!--
#gruen {
color:green;
}
//-->
</style>

Übungen zum Thema CSS finden Sie hier.

Ausführliche Informationen und eine Liste der CSS-Befehle finden Sie bei SELFHTML von Stefan Münz unter http://de.selfhtml.org.

Zum Seitenanfang