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.
Tipps für einfache Grundlayouts
Mit Hilfe von CSS lassen sich schnell einfache Grundlayouts für HTML-Dokumente erstellen.
- Die Bildschirmausgabe zentrieren.
- Ein zweispaltiges Layout mit einem Hauptbereich und einer Seitenleiste für zusätzliche Informationen.
- Ein flexibles mehrspaltiges Layout mit Hilfe eines Grid-Layouts.