ralf rabe


IT-Training · Werbung · IT-Beratung

Casca­ding Style­sheets (CSS)

Cascading Stylesheets (CSS) sind eine Sprache für Stilvorlagen zur Gestaltung von strukturierten Dokumenten.

So kann man mit Hilfe von HTML die inhaltliche Untergliederung vornehmen und mit CSS die Gestaltung des Layouts.

Die Vorteile:
  • man kann mit wenigen Änderungen innerhalb der CSS weitläufig sichtbare Änderungen an der Webseite vornehmen;
  • CSS können auf mehrere Dokumente angewendet werden , um ein gleichmäßiges Gesamtbild der Webseite zu schaffen;
  • vom Inhalt unabhängige Layouts für diverse Geräte (PC, Smartphone u. a.) können in einer Datei geschaffen werden.

CSS im Dokument

CSS können direkt in das entsprechende Dokument integriert werden (üblicherweise innerhalb des <head >-Tags), wenn sie nur für dieses Dokument benötigt werden. Dafür wird der Tag < style> benötigt mit dem Attribut type und dem Inhalt "text/css".

Der Start-Tag sieht somit folgendermaßen aus:

<style  type= "text/css">


     ...[INHALT]...

Nach dem Inhalt kommt der Schluss Tag </style >.

CSS als eigenständiges Dokument

Wenn sie die Stilvorlagen für mehrere Seiten nutzen möchten, empfiehlt sich eine Auslagerung der CSS in eine separate Datei, die Dateiendung hierfür ist *.css .

Diese Datei wird mittels eines <link >-Tags mit der HTML-Seite verbunden, dieser Tag steht innerhalb des <head >-Bereichs.

Hier ein Beispiel für die Integration einer stylesheet.css - Datei:

< link  rel= "stylesheet"  href= "stylesheet.css" />

CSS Elemente

Es gibt verschiedene Möglichkeiten zur CSS-Definition, so unter anderem:

  • die Definition von HTML-Tags
  • die Definition von Klassen (html-Attribut class) oder
  • die Definition von ID's (html-Attribut id).
Ein CSS-Element wird grundsätzlich nach folgendem Schema definiert:

name { attribut : wert ; ...     ... attribut : wert ;}

Der Übersicht halber kann man die einzelnen Elemente auch anders anordnen, das macht vor allem bei sehr vielen Attributen Sinn:

name {

attribut : wert ;
...
attribut : wert ;
}

Wichtig ist die strikte Benutzung der geschweiften Klammer { und am Ende }, weiterhin nach dem Attribut die Nutzung des Doppelpunktes und nach jedem Wert - auch dem letzten - ein Semikolon.

Hier ein Beispiel:

body {

background-color : #00f ;
color : white ;
font-family : Arial, Helvetica, FreeSans, sans-serif ;
font-size : 11pt ;
}

Das obere Beispiel zeigt die CSS-Definition für den HTML-Tag <body>. So kann für jeden Tag genau festgelegt werden, wie der Inhalt aussehen soll.

Klassen und ID's

Individueller gestalten kann man seine Webseite mit Klassen und ID's.

Bitte beachten:

Bei der Definition von Klassen und ID's kann eine eigene Bezeichnung gewählt werden.


  • Bei der Definition der Klassen in der css-Datei kommt ein Punkt (.) vor die Bezeichnung. Eine CSS-Definition für Klassen (class) kann für mehrere verschiedene Elemente vorgenommen werden.
  • Bei den ID's kommt eine Raute (#) vor die Bezeichnung. Die Definition für ID's wird nur für ein ganz konkretes Element genutzt.

Hier ein Beispiel für eine Klasse, der Text eines Absatzes soll im Blocksatz stehen:

.blocksatz {
text-align : justify ;
}

Hier ein Beispiel für eine ID, die genauen Eigenschaften für einen konkreten Container (<div>-Tag im html-Dokument) werden festgelegt:

#container1 {
background-color : black ;
margin : 0 10px 20px 0 ;
float : left ;
}

Mehr Information finden Sie auf der Wiki-Seite von selfhtml.org.