Die Grundstruktur von CSS

Grundidee von CSS

Die Grundidee von CSS ist die Trennung von Design und Inhalt in einem HTML-Dokument. Dies erzeugt schlankere HTML-Dokumente, die mit Hilfe der HTML5-Strukturelemente auch inhaltlich klar strukturiert werden können.
Semantisch klar strukturierte Websites sind ein wichtiger Beitrag für die Suchmaschinenoptimierung (SEO). Sie erleichtern den Suchmaschinen die Indizierung und werden im Ranking besser bewertet.

Cascading Stylesheets

CSS bedeutet Cascading Stylesheets. Der Begriff Cascading deutet an, wie bzw. in welcher Reihenfolge CSS-Formatierungsanweisungen behandelt werden. Mit Stylesheet ist eigentlich eine externe Textdatei gemeint, in der die Anweisungen für die Formatierung des Inhalts eines HTML-Dokuments stehen.

Reihenfolge der CSS-Formatierungsanweisungen

Die Reihenfolge der CSS-Anweisungen bestimmt, welche Formatierungsanweisung übernommen wird. Dabei wird nach folgenden Gesichtspunkten vorgegangen:

• Die zuletzt angegebene Formatierungsanweisung überschreibt vorangegangene Formatierungsanweisungen
• Inline Formatierungsanweisungen überschreiben alle vorangehenden Anweisungen

So ist es auf einfache Art möglich, eine externe Stylesheet-Datei zu schreiben und zu verlinken, die für mehrere Dokumente gilt. Diese kann dann durch dokumentinterne Definitionen im Head-Bereich bzw. durch Inline Definitionen präzisiert werden.

Externe Stylesheet-Datei

Eine externe Stylesheet-Datei ist eine Textdatei, die CSS-Formatanweisungen enthält. Diese kann im Head-Bereich ins HTML-Dokument eingebunden (verlinkt) werden. Mehrere HTML-Dokumente können sich die selbe Stylesheet-Datei "teilen". Eine Änderung in dieser zentralen Stylesheet-Datei bewirkt dann eine Änderung in allen HTML-Dokumenten, in die diese Stylesheet-Datei verlinkt wurde. Dies spart viel Arbeit bei der Pflege von Websites.
Eine solche zentrale Stylesheet-Datei sollte in der Verzeichnisstruktur der Website einen besonderen Platz erhalten. Sinnvoll (und gängig) ist die Platzierung in einem Unterordner mit dem Namen css. Dies trägt ebenfalls zu gutem Programmierstil bei.

Die Syntax von CSS-Formatanweisungen

Eine CSS-Formatanweisung wird als Regel oder Regelsatz bezeichnet. Eine Regel beinhaltet einen Selektor gefolgt von einer Liste von Eigenschaften. Die Schlüsselwörter für die Eigenschaften sind in englischer Sprache gehalten. Sie sind in den meisten Fällen selbsterklärend. Somit erschließt sich bereits mit dem Blick auf die CSS-Eigenschaften das Aussehen des durch den Selektor ausgewählten HTML-Element.

Das Box-Modell

Der Inhalt eines HTML-Dokuments wird in Blöcken (Boxes) gegliedert. Mit CSS kann man das Design eines solchen rechteckigen Bereichs definieren. Dazu gibt es in CSS das Box-Modell, das den Aufbau eines Blocks definiert.