CSS und HTML zusammen verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen CSS in Ihren Webseiten verwenden.

Lösung

Beginnen Sie mit einer leeren Seite in Notepad, in Ihrem bevorzugten Textverarbeitungsprogramm oder in einem speziellen Programm für die Webentwicklung wie z.B. Macromedia Dreamweaver oder Microsoft Expression.

Fügen Sie zwischen den body-Tags den folgenden HTML-Code ein, und sichern Sie die Datei als Kochbuch.html (siehe die folgende Abbildung):

Abbildung: Die Standarddarstellung des HTML-Codes im Browser.

Erweitern Sie nun den Quelltext um die folgenden Änderungen. Auf diese Weise werden die Standardstile für Links, Aufzähllisten und Überschriften neu definiert. Das Ergebnis sehen Sie in der nachstehenden Abbildung:

Abbildung: Nach dem Hinzufügen von CSS-Anweisungen wird die Seite anders dargestellt.

Diskussion

Die CSS-Regeln bestehen aus zwei Teilen: Selektoren und Eigenschaften. Der Selektor bestimmt, für welchen Teil Ihrer Webseite die Stildefinitionen gelten sollen. Auf den Selektor folgt ein Paar geschweifter Klammern. In diesem befinden sich eine oder mehrere Eigenschaften und deren Werte. Die Eigenschaft sagt dem Browser, welches Element verändert werden soll, während der Wert anzeigt, welche Änderungen durchgeführt werden sollen.

So weist der Deklarationsblock im folgenden Beispiel den Browser an, den mit dem h1-Element markierten Inhalt 120% größer als die Standardgröße des Browsers darzustellen:

In der folgenden Tabelle sehen Sie eine nach Selektor, Eigenschaft und Wert geordnete Aufstellung des in dieser Lösung verwendeten CSS-Codes. Die Ergebnisspalte erläutert, was passiert, wenn die Eigenschaften und Werte auf das durch den Selektor ausgewählte Element angewandt werden.

Tabelle: Aufstellung der in der Lösung verwendeten Selektoren, Eigenschaften und Werte.

Eine CSS-Anweisung besteht standardmäßig aus dem Selektor, gefolgt von Eigenschaften und Werten in geschweiften Klammern. Der Selektor entspricht normalerweise dem HTML-Tag, auf das die Stilanweisung angewendet werden soll. Eigenschaft und Wert werden durch einen Doppelpunkt voneinander getrennt:

Um die Leserlichkeit zu erhöhen, bringen die meisten Designer Eigenschaften und Werte allerdings in einer eigenen Zeile unter, wie hier gezeigt:

Beide Ansätze sind korrektes CSS. Verwenden Sie die Methode, die für Ihre Situation am besten geeignet ist.

Darüber hinaus können CSS-Selektoren gleichzeitig mehrere Eigenschaften zugewiesen werden. Auf diese Weise sind auch komplexere visuelle Darstellungen möglich. Um innerhalb eines Selektors mehrere Eigenschaften verwenden zu können, müssen die einzelnen Anweisungen jeweils durch ein Semikolon voneinander getrennt werden, wie im folgenden Beispiel gezeigt. Wie in der zweiten Hälfte des Beispiels zu sehen ist, können Sie auch mehreren Selektoren auf einmal die gleichen Stildefinitionen zuweisen. Hierfür werden die Selektoren durch ein Komma voneinander getrennt:

Siehe auch

Im Rezept Verschiedene Selektoren für die Zuweisung von Stilen finden Sie weitere Informationen zu CSS-Selektoren; CSS 2.1: Selektoren, Pseudoklassen und Pseudoelemente enthält eine Liste möglicher Selektoren.