Inhalt

online-Logo

Cascading Style Sheets (CSS): Was'n das?

Die Grundidee von HTML war, dass nur die reine Information und der Aufbau einer Webseite übermittelt werden, nicht aber die Form der Darstellung. So kann der Nutzer selbst wählen, welche Schriftart, Farbe, Stil, Größe er haben will. Eine 12pt-Schrift hat ja je nach Bildschirm-Auflösung sehr unterschiedliche Größen und da unsere Augen unterschiedlich gut sind, sollte das nicht vom Programmierer vorgegeben werden.
Leider werden diese Idealvorstellungen heute immer seltener umgesetzt.

Da also soviel Freiheit nicht sein darf, hat man Befehlsgruppen für den Stil von Dokumenten entwickelt, die CSS, die ab HTML Version 4.0 zu HTML gehören.

Was ist an ihnen nun kaskadierend?

  1. Ganz grob: Man kann (was wir hier nicht beschreiben wollen) verschiedene Stile in einer Datei zusammenfassen. In allen html-Dateien, die diese Stile benutzen wollen, wird dann einfach auf diese Datei verwiesen.
  2. Etwas feiner: Am Beginn einer html-Datei können Stile angegeben werden, die in der Datei verwendet werden sollen. Im Zweifel gehen sie der Referenz auf eine Datei (wie unter 1. beschrieben) vor.
  3. Ganz fein: Man kann vielen Tags (z.B. dem Absatz-Tag <p>) style-Informationen mitgeben, die allen anderen Stilangaben (wie unter 1.+2. beschrieben) vorgehen.
So verfeinert sich kaskadenartig die Spezifikation der Stile.

...und praktisch?

Definition am Dateibeginn

Am Ende des Dateikopfes (also vor </head>) wird im html-Dokument ein durch <style> und </style> begrenzter Bereich definiert, in den die Stilangaben kommen. (Damit alte Browser, die keine CSS verstehen, nicht irritiert werden, wurden früher alle Angaben als "Kommentar" markiert, kamen also zwischen <!-- und --> - das ist heute nicht mehr nötig).

Man kann nun den bekannten Tags wie <H1>, <body>, u.s.w. Eigenschaften (Stile) zuordnen. Wie die Definitionen aussehen müssen, und wie man sie anwendet, findet sich in der Beispieldatei: Schauen Sie mal in den Quelltext!
Bei den Schrifttypen bedeutet die Aufzählung, dass, wenn eine Type auf dem anzeigenden Computer nicht gefunden wird, die nächste als Ersatz genommen werden soll.

Erweiterungen z. B. des Absatz-Tags (<p>)

...werden einfach (zusätzlich zum "p") in den Tag geschrieben.
Aufpassen bei der Syntax:
die Zeichenkette in Hochkommata, dann: Schlüsselwort - Doppelpunkt - Wert - Semikolon ... (";" entfällt am Ende).

Beispiel (Einrückung des Absatzes und Zentrierung aller Zeilen): 

...
<p style="margin-left:1cm; text-align:center">
...

Letzte Änderung: 3. März 2009

Informationen, Kritik, Anregungen zur WebSite: Bitte Mail an Frank Toussaint.