CSS (Cascading Stylesheets)

Nach den vom W3C (World Wide Web Consortium) festgelegten Webstandards, sind Seiteninhalte und deren Formatierung strikt zu trennen. Das HTML-Dokument enthält die Inhalte, während die Stylesheets die Gestaltung übernehmen. Im Idealfall werden die CSS-Angaben in eine externe Datei geschrieben, also ausgelagert. Für eine valide Seitengestaltung bietet ein schlanker, sauber strukturierter HTML-Code die besten Voraussetzungen. Warum noch immer so viele tabellenbasierte Layouts Anwendung finden, ist im Hinblick auf die vielen Vorteile von CSS unverständlich. Fakt ist, dass mit CSS annähernd jede Tabellenstruktur ‘nachgebaut’ werden kann. Tabellen sollten, wie der Name sagt, nur zur Darstellung echter tabellarischer Inhalte verwendet werden.

Wie erwähnt ist ein schlanker, gut strukturierter HTML-Code der Schlüssel zum Erfolg. Eine sogenannte ‘DIV-Suppe’ ist jedoch nicht das Ziel dieser Formatierungssprache, gerade CSS-Neulinge packen gerne jedes Element in ein extra DIV. Das div-Tag ist dazu gedacht, Elemente zusammen zufassen, die logisch zusammen gehörenden. Grundsätzlich können jedem Tag die Stylesheet-Angaben mitgegeben werden, die auch für DIV-Tags zur Verfügung stehen. Es ist nicht zwingend notwendig, dass ein Tag in einem umschließenden DIV steht. Wer seine Seiten jedoch in einer DTD (Dokumenttypdeklaration) Strict-Variante schreibt, muss darauf achten, dass beispielsweise Inline-Elemente nur innerhalb eines Block-Elements vorkommen sollten. Eine Stylesheet-Regel besteht aus dem Selektor (z.B. h1) und der Deklaration, welche die Formatierung beschreibt. Die Deklaration steht innerhalb geschweifter Klammern und enthält die Eigenschaftsbezeichnung (z.B. color) und den Wert (z.B. Farbcode). Weist man einem Selektor mehrere Eigenschaften zu, werden diese durch Semikola getrennt. Um eine Deklaration mehreren Selektoren zuordnen, schreibt man diese nacheinander vor die Deklaration und trennt diese durch Kommazeichen.

Der Selektor fungiert als Bindeglied zwischen dem HTML-Element im Dokument und der CSS-Deklaration. Um den Code des HTML-Dokumentes so schlank wie möglich zu halten, werden die CSS-Angaben in eine separate Datei ausgelagert und im Head-Bereich der Seite eingebunden. Die CSS-Datei selbst wird durch sogenannte Syntaxgruppierung schlank gehalten. An Stelle von border-style: solid; border-width: 1px; border-color: #000000 - lässt sich ein Rahmen auch durch ein schlichtes border: 1px solid #000000 realisieren. In der Regel vererbt sich die Deklaration eines Elements, untergeordnete Elemente übernehmen also die Formatierung der übergeordneten, sofern das Stylesheet diesem keine andere Formatierung zuweist. Eine Ausnahme bildet beispielsweise, die Zuweisung der Hintergrundfarbe. Das ist einleuchtend, da die Hintergrundfarbe des umgebenden Elements eh sichtbar bleibt.

Eine sehr flexible CSS-Gestaltung ist durch zusätzliche Selektoren-Attribute möglich, man unterscheidet die Attribute ID und CLASS. Der Unterschied besteht darin, dass eine ID nur ein einziges Mal innerhalb eines Dokumentes vergeben wird, während das CLASS-Attribut mehrfach verwendet werden darf. Die Unterscheidung ist simpel: ID-Selektoren sind durch ein Rautenzeichen und eine CLASS durch einen Punkt gekennzeichnet. Im HTML-Code ordnet man diese Attribute in Form von id=”ID-Name”, beziehungsweise class=”CLASS-Name” zu. Möglich ist auch eine Selektoren-Verschachtelung. Möchte man den Link einer unsortierten Liste formatieren, so funktioniert das über den Selektor ‘ul li’. Ähnlich wie bei den Programmiersprachen, können CSS-Dateien auch kommentiert werden. Das ist sinnvoll, wenn umfangreiche Dateien auch von anderen Webmastern bearbeitet werden. Kommentare in CSS sehen folgendermaßen aus: /*mein Kommentar*/.

Mit CSS strukturierte HTML-Dokumente werden von vielen Medientypen unterstützt. Inzwischen sind auch alle gängigen Browser, bei einer annähernd standardkonformen CSS-Unterstützung angelangt.

Comments are closed.