Selektoren

Die Selektoren legen fest, auf welche Elemente ein Style angewendet werden soll.

Elementselektoren

Dieser Style gilt für genau dieses Element.

h1 { color: green; }
color setzt hier die Schriftfarbe des Elementes h1 auf den Wert grün.
body { background-color: gray; }
background-color setzt die Hintergrundfarbe des ganzen Dokuments auf den Wert grau.

Gruppenselektoren

Style gilt für eine Reihe von Elementen. Die einzelnen Selektoren sind durch Kommas getrennt.

h2, h3 { color:gray; }
zeigt die Elemente h2 und h3 in grau an.

Kontextsensitive Selektoren

Style gilt für ein Element, wenn es innerhalb eines anderen Elementes liegt.

h1 { color: red; }
h1 a { color: blue; }
das a-Elemente innerhalb des h1 -Elementes wird blau angezeigt. h1-Elemente sonst werden in rot angezeigt.

Klassenselektoren

Mit dem Attribut class wird einem Element einen bestimmten Style zugewiesen. Man kann allgemeine Klassen oder elementspezifische Klassen erstellen. In der CSS-Syntax wird ein Punkt vor den Namen der Klasse gesetzt.

.blau { color:blue; } kann jedem Elementen zugewiesen werden
<p class="blau"> dieser Text wird blau </p>
h2.rot { color:red; } ist nur für das Element h2
<h2 class="rot"> rote Überschrift </h2>

Mehrere Klassen einem Element (tag) zuweisen

Elemente können mehrere Klassen haben. Klassen können kombiniert werden wie im Beispiel unten.

normaler <p> tag

Der <p> tag ist ein Blockelement und entspricht immer der Breite des Eltern- Elementes. Der <p> tag darf keine anderen blockerzeugenden Elemente wie Überschriften, Textabsätze Tabellen oder Listen enthalten.

<p>Inhalt</p>

<p> tag eingerückt

In diesen Beispiel wird der <p> tag mit der Klasse "zitat" eingerückt.

HTML <p class="zitat">Inhalt</p>
CSS  .zitat { margin-left: 50px;}

<p> tag mit oliver Schrift

In diesen Beispiel wird die Schriftfarbe des <p> tags über die Klasse "olive" geändert.

HTML <p class="olive">Inhalt</p>
CSS  .olive{ color: #aca641; }

<p> tag mit oliver Schrift und eingerückt

Hier bekommt der <p> tag über die Klasse "olive" seine Schriftfarbe und wird über die Klasse "zitat" eingerückt.

<p class="olive zitat">Inhalt</p>

ID-Selektoren

Mit dem Attribut ID wird einem Element einen Bezeichner zugewiesen. ID's werden nur einmal vergeben. Sie sind universell. ID-Selektoren wird das Rauten-Zeichen # vorangestellt. ID-Namen sind frei wählbar, dürfen aber nicht mit einer Zahl beginnen.

<div id="logo"> LOGO IMAGE </div>
#logo { background-color: green; }
zeigt das Element mit dem id -Wert logo, mit grünem Hintergrund an.

ID's und Klassen können kombiniert werden.

Eine ID kann zusätzlich mit einer oder mehreren Klassen kombiniert werden. So können zum Beispiel auf einfache weisse Hintergrundbilder im Banner ausgewechselt werden, ohne dass für jedes Hindergrundbild die ID und deren Abhängingkeiten neu definiert werden müssen.

Beispiel: Das Hintergrundbild wird über die CSS Klasse im Banner ausgewechselt.

Html

 <div id="banner" class="produkte">
 <div id="banner" class="ueberuns">

CSS

.produkte { background-image: url(images/produkte.jpg); }
.ueberuns { background-image: url(/images/ueberuns.jpg); }