Allgemeine Info zu CSS

Durch den Einsatz von Cascading Style Sheets (CSS) können Sie Ihre Webseiten auf einfache Weise gestalten, ohne die gleichen Anweisungen für jedes Element (oder auch jedes HTML-Dokument) einzeln anzugeben. Tatsächlich ist CSS deutlich einfacher, als es auf den ersten Blick wirkt. Das wollen wir Ihnen in diesem Kapitel zeigen. Die folgenden Rezepte vermitteln Ihnen die....

Eine Webseite mit Stildefinitionen versehen

Sie wollen wissen, wie Sie die vorgestellten Rezepte in einer Webseite nutzen können. Verwenden Sie ein externes Stylesheet. Hierfür müssen Sie eine zusätzliche Textdatei erstellen, die Sie mit der Dateiendung .css versehen. Der Inhalt ist denkbar einfach: Anstatt die Regeln direkt in der HTML-Datei zu definieren, wie in der zweiten Lösung gezeigt, stehen die Stildefinitionen in einer...

Den Aufbau einer CSS-Regel verstehen

Sie wollen wissen, wie eine CSS-Regel aufgebaut ist. CSS-Regeln bestehen aus zwei Teilen: einem Selektor und einem Deklarationsblock. Der Selektor ist, wie sein Name schon sagt, dafür zuständig, das oder die Elemente auszuwählen, auf die die Regel angewandt werden soll. Auf den Selektor folgt, umgeben von geschweiften Klammern, der Deklarationsblock...

Selektoren für die Zuweisung von Stilen verwenden

Sie wollen festlegen, für welche Teile eines HTML-Dokuments Ihre Stildefinitionen gültig sein sollen. Bevor Sie festlegen, wie bestimmte Teile eines Dokuments gestaltet werden, müssen Sie diese im Stylesheet auswählen. Genau hierfür gibt es die Selektoren. Sie unterscheiden sich je nach Zweck. So gibt es Selektoren, die nur auf bestimmte Elemente (Absätze...)...

Selektoren gruppieren

Sie möchten eine Regel für mehrere Elemente auf einmal angeben. Geben Sie die Selektoren in einer durch Kommata getrennten Liste an und definieren Sie dann die gewünschte Regel, wie hier gezeigt: Mit dieser Regel wird festgelegt, dass alle Überschriften erster bis vierter Ordnung sowie alle Elemente, die mit der Klasse wichtig gekennzeichnet wurden, in einer serifenlosen Schrift...

Alle Elemente auf einmal auswählen

Ihre CSS-Regeln sollen für alle Elemente einer Seite gelten. Verwenden Sie den universellen Seelektor (*). Hier sehen Sie eine häufige Verwendung des universellen Selektors. Mit dieser Regel werden die Innen- und Außenabstände aller Elemente auf den Wert 0 zurückgesetzt. Bei der Gestaltung von Webseiten kommt es gelegentlich vor, dass Sie Regeln definieren müssen, die...

Bestimmte Elemente nach ihrem Namen auswählen

Sie wollen CSS-Regeln nur auf bestimmte HTML-Elemente anwenden, etwa nur auf Überschriften erster Ordnung oder nur auf alle Absätze. Verwenden Sie die entsprechenden Elementselektoren. Als Elementselektoren (auch Typselektoren genannt) bezeichnet man CSS-Selektoren, die ein bestimmtes Element oder ein HTML-Tag benennen, auf das die Stildefinitionen angewandt...

Kindelemente auswählen für andere Elemente

Ihre CSS-Regeln sollen für Elemente gelten, die Kindelemente (direkte Nachfahren) eines anderen Elements sind. Verwenden Sie den Selektor für Kindelemente (>). Wie beim Selektor für Nachkommen werden auch hier zwei (oder mehr) Elementselektoren miteinander kombiniert. Um ihre Beziehung zueinander zu kennzeichnen, werden beide durch eine öffnende spitze...

Benachbarte Geschwisterelemente auswählen

Sie wollen CSS-Regeln definieren, die nur für ein Element gelten sollen, das ein direkter Nachbar eines anderen Elements ist. Um benachbarte Geschwisterelemente auszuwählen, werden diese mit einem Pluszeichen (+) verbunden. Zwei Elemente gelten als benachbarte Geschwisterelemente, wenn sie sich im HTML-Quelltext direkt "nebeneinander" befinden...

Regeln für Geschwisterelemente definieren

Sie wollen CSS-Regeln für ein Geschwisterelement definieren, das kein direkter Nachbar ist. Verwenden Sie den CSS3-Selektor für allgemeine Geschwisterelemente (~). Damit das div-Element mit einem schwarzen Rahmen versehen wird, muss eines der vorangehenden Geschwisterelemente eine ungeordnete Liste sein. Mit dem in CSS3 neu hinzugekommenen Seelektor für...