Selektorentypen:

CSS-Angaben bestehen aus mindestens drei Elementen:

1) der Selektor
Hört sich bedenklich technisch an, gemeint ist damit aber das Objekt oder die Bezeichung, der eine Formatierung zugewiesen werden soll.

Unterschieden wird hierbei in Elementselektoren (z.B. ein XHTML-Tag wie <h1>), Klassenselektoren (ein frei definierter Name, wie bei Layoutprogrammen oft üblich) und Pseudo-Klassen (wichtigste Pseudo-Klasse ist die Anker-Klasse).

2) die Eigenschaft
Die Eigenschaft ist die Formatierungsform, also die definition, was nun genau am Selektor formatiert werden soll (z.B. die Schriftgröße oder -farbe)

3) der Wert
Der Wert ist die Spezifizierung der Eigenschaft, die konkrete Angabe des "wie", also bei der Eigenschaft "Schriftgröße" der Wert "12 Punkt", oder bei der Schriftfarbe der Wert "Schwarz" (genauer #000000).
 

In der Kombination sieht dies dann folgendermaßen aus:

Selektor {Eigenschaft: Wert}
Beispiel: h1 {font-size: 12pt}

Wie man erkennen kann werden Eigenschaft und Wert in geschweifter Klammer hinter den Selektor gesetzt. Eigenschaft und Wert werden durch Doppelpunkt getrennt.
 

 
Elementselektoren

Elementselektoren definieren die Formatierung von XHTML-Befehlen, d.h. sie können sie Formatierung erweiteren/spezifizieren oder auch modifizieren/ändern. Als Beispiel für eine Änderung der Standard-Formatierung: es ist möglich, die Leerzeile vor/nach einem als Überschrift (h1-h6) ausgezeichneten Text auszuschalten, oder den Einzug bei Listen zu ändern.

Beispiel:

h1 {
      font-size: 14pt;
      color: #666666;
      padding-bottom: 0pt;
      padding-top: 15pt;
      margin: 1pt; 
    }

Bei der Verwendung von Elementselektoren  werden die Stilangaben immer dann (automatisch) anwendet, wenn der im CSS definierte Befehl im XHTML-Dokument eingesetzt wird.

So sieht's aus
 

 
Class- und ID-Selektoren
Neben den Elementselektoren gelten die Klasseselektoren (und ID-Selektoren) als die mächtigsten Werkzeuge, die CSS uns an die Hand gibt. Sie ermöglichen es uns, Formate zu erstellen, die NICHT an einen spezifischen XHTML-Tag gekoppelt sind, also "frei" verwendet werden können. Da kein bestehender Befehl formatiert wird, muss eine Klasse erstellt werden, ein neues "Element". Der Name dieses Elements kann frei gewählt werden, muss aber ASCII-konform sein (keine Sonderzeichen, Leerzeichen). Ähnlich wie bei der Erstellung von Formaten in Layoutprogrammen wie z.B. QuarkXpress wird zuerst ein name vergeben, dann diesem Namen die Stile zugewiesen und schließlich im Inhaltsdokument der so auszuzeichende Inhalt mit diesem neuen Namen /Klasse ausgezeichnet werden.

1) Class-Selektoren
Im CSS wird bei einem Klasse-Selektor zur Kenntlichmachung, das es sich um einen Klasseselektor handelt, ein Punkt vorangestellt.

.name

also zum Beispiel .navigation

.navigation {font-size: 12pt; color: #00ff00; padding-left: 40pt}

Es gibt zwei Möglichkeiten, eine solche Klasse einzusetzen:

A) Einsetzen in den Befehl <div> oder <span>
Die XHTML-befehle <div> und <span> zeichen einen Bereich innerhalb der Inhalte aus, haben aber selbst keine Auswirkung auf die Darstellung. Sie können so als Container dienen, die durch die Erweiterung mit Klassen neue Auszeichnungen erhalten. Hierzu werden sie erweitert mit dem Attribut class="Wert", wobei der Wert der Name der hier anzuwendenden CSS-Klasse darstellt (nur ohne vorgestelltem Punkt).

Beispiel:
<div class="navigation"> Erster Punkt <br /> Zweiter Punkt </div>
oder
<span class="navigation"> Erster Punkt <br /> Zweiter Punkt </span>

<span> und <div> eigenen sich besonders gut zur Erstellung tabellenfreier, auf CSS aufgebauten Layouts, da durch spezielle CSS-Angaben diese "Container" frei auf dem Monitor positioniert werden können (ähnlich Textcontaineren wie z.B. in Freehand)

B) Als Attribut in jeden beliebigen Tag
Das Attribut "class" kann aber auch in Standard-XHTML-Tags eingefügt werden:
<ul class="navigation"> <li> Erster Punkt</li> <li> Zweiter Punkt </li> </ul>

So sieht's aus

2) ID-Selektoren
ID-Selektoren sind Class-Selektoren sehr ähnlich. neben der Schreibweise differenziert sich der ID-Slektor von Class-Selektor dadurch, dass der Class-Selektor beliebig oft in einem XHTML-Dokument (auch zu verschiedenen Tags) eingesetzt werden kann, der ID-Selektor jedoch nur ein einziges mal. Dies scheint nur bedingt Sinn zu machen, kann jedoch bei komplexen CSS-Layouts durchaus Einsatzberechtigung erlangen. Zur Definition eines ID-Selektors wird wieder ein eigen zu wählender name verwendet, z.B. hauptueberschrift. Im gegensatz zum Class-Slektor wird dem namen im CSS eine Raute vorangestellt:

#hauptueberschrift {font-size: 15pt; color: #00ff00;}

Eingesetz werden kann dieser Selektor ebenfalls in <div> oder <span>, oder auch in jeden beliebeigen anderen Tag. Hierbei wird das Attribut id verwendet:
<h1 id="hauptueberschrift"> Eine Überschrift </h1>

In einem Tag können auch name und id gleichzeitig vewendet werden.

 
Pseudo-Klassen und -Elemente
Pseudo-Klassen sind Selektoren, die sich nicht auf Elemente beziehen, die im XHTML-Code definiert sind, sondern vom Endgerät/software, also dem Browser, produziert werden.

Wichtigste Pseudo-Klassen:
a:link {
color: #FF6600;
text-decoration: none;
}

a:hover {
font-weight: bold;
color: #ff6600;
}

a:visitet{
color: #e34b00;
text-decoration: none;
}

a:active {
font-weight: bold;
color: #666666;
}

So sieht's aus

Pseudo-Elemente
Pseudo-Elemente definieren Teile anderer Elemente, z.B den ersten Buchstaben in einem Absatz (h1: first-letter), oder die gesamte erste Zeile (p: first-line).