[Selektoren]

Wie bereits eingangs erwähnt, können Sie Stileinstellungen nicht nur für einzelne Elementtypen ändern, sondern auch für Elementgruppen oder nur für ein einzelnes Element.
Ein Selektor, damit wird das bezeichnet, was vor den geschweiften Klammern steht, kann ein Element-Tag, ein Klassenname oder eine ID sein, identifiziert die Style-Sheets-Einstellungen und wird genutzt, um die Elemente festzulegen, die innerhalb der Webseite geändert werden.

Ein Klassenname bietet die Möglichkeit, Einstellungen auf eine Gruppe benannter Elemente anzuwenden.

<STYLE type="text/css"> <!-    P.ersteklasse{ color: red; margin-left: 1.5in }     .zweiteklasse{ color: blue; font-size: 18pt } -> </STYLE> ... <P class=ersteklasse> ... </P> <H1 class=zweiteklasse> ... </H1> <P class=zweiteklasse> ...

In diesem Code werden zwei Klassen erzeugt, eine spezielle Klasse für Absätze mit dem Namen ersteklasse, und eine andere für beliebige Elemente, zweiteklasse.
Die Syntax verwendet einen optionalen Tag-Namen, gefolgt von einem Punkt und dem Klassennamen. Wenn der Tag-Name nicht angegeben wird, kann die Klasse auf verschiedene Elemente angewendet werden.

Style-Sheet-Auswahl nach der ID wird vom W3C nicht empfohlen, vor allem weil dadurch Style Sheets für bestimmte Elemente statt für Elementklassen erzeugt werden. Die Aufgabe von Style Sheets ist es, globale Änderungen vorzunehmen, statt einzelne Elemente zu ändern. Die Verwendung einer ID bedingt, dass einzelnen Elementen Stile hinzugefügt werden.
Der ID-Stil-Selektor verwendet statt des Punkts, der im Klassenselektor verwendet wird, ein Nummernzeichen (#).

<STYLE type="text/css"> <!-    P#ersteid { color: red; margin-left: 1.5in }     #zweiteid { color: blue; font-size: 18pt } -> </STYLE> ... <P id=ersteid> ... </P> <H1 id=zweiteid> ... </H1> <P id=zweiteid> ...