Cascading Style Sheets - Tutorial für WebDesigner und WebDesignerinnen


Letzte Änderung am 21.01.2005
Cascading Style Sheets - ein Tutorial
Vorbemerkung: Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004.
Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden. CSS-Bereiche, die in den gängigen Browsern bisher nicht implementiert wurden, werden nicht dokumentiert.
Andreas Lutz MatteDesign, Bern

Kapitelübersicht

Kapitel 1.2: CSS und Dokumente

Externes CSS mit dem Link-Tag:
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/>
Die Einbimdung muss im Head-Teil der Datei stehen.
Das importierte CSS besteht aus einer Reihe von CSS-Angaben, ohne das einführende und schliessende <style>-Tag in einer normalen ASCII-Textdatei mit der Endung .css.
Es sind beim Media-Type verschiedene, komma-separierte Anweisungen möglich (oder keine Angabe)
Es könnenen mehrere Stylesheets eingebunden werden, welche vom Browser alle gleichzeitig benutzt werden, wenn die rel="stylesheet"-Angabe vorhanden ist.
Mit <link rel="alternate" type=... href=... title="Big Text"/> können alternative Sheets eingebunden werden (In Gecko-basierten Browsern im Menu, im IE mit JavaScript umsetzbar)

Demo 1

Die Definition von CSS im Headbereich der Datei:
Das <style>-Tag erfordert die Angabe von type="text/css".
Demo 2
Die @import-Direktive ergibt eine weitere Möglichkeit des Imports von CSS-Dateien. Sie steht immer an erster Stelle innerhalb einer Style-Definition.
Beispiel: @import url(sheet2.css) mediatyp;
Inline-Styles in einzelnen Tags
Wird im Anfangs-Tag selbst als style="Definitionen" positioniert und überschreibt alle weiter oben definierten Regeln. Hier ist allerdings kein @import url() möglich.
Fürs erste Layout werden häufig Inline-Style-Definitionen gewählt, die jedoch später aufgrund der Unübersichtlichkeit ersetzt werden. Sicher ist es kein guter Stil, die CSS in den Tags zu definieren.

Demo 3

CSS- Kommentare:
/*kommentar*/ Wird am besten direkt in der Zeile der Angabe positioniert.


Weiter zu Kapitel 2: Selektoren