CSS: die Selektoren
Klassenselektoren
Ein Klassenselektor spricht Elemente an, die einer bestimmten Klasse zugehörend sind. Ein Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.
<html lang="de">
<head>
<title>Der class-Selektor</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
h2.gross { font-size:20pt; color:blue; }
h2.mittel { font-size:15pt; color:blue; }
h2.klein { font-size:10pt; color:blue; }
.rot { color:red }
.gruen { color:green }
</style>
</head>
<body>
<h2 class="gross">Große blaue Überschrift.</h2>
<h2 class="mittel">Mittlere blaue Überschrift.</h2>
<h2 class="klein">Kleine blaue Überschrift.</h2>
<div class="rot">Ein roter Text in einem Absatz.</div>
<h2 class="rot">Eine normale rote Überschrift.</h2>
<cite class="grün">Ein Zitat, das nicht grün ist.</cite><br /><br />
<cite class="gruen">Ein grünes Zitat.</cite>
</body>
</html>
ID-Selektor
Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID zugeordnet wurde. In HTML- und XHTML-Dokumenten handelt es sich dabei um das id-Attribut. Ein ID-Selektor wird gebildet, indem das Gatterzeichen „#“ vor den ID-Namen gestellt wird.
<html lang="de">
<head>
<title>Der id-Selektor</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
h2 { font-size:20pt; color:blue; }
#rot { color:red }
#kursiv { font-style:italic }
</style>
</head>
<body>
<h2>Blaue Überschrift.</h2>
<h2 id="kursiv">Kursive, blaue Überschrift.</h2>
<h2 id="rot">Blaue Überschrift???</h2>
</body>
</html>
Universalselektor
Der Universalselektor spricht jedes Element im Elementbaum an. Gekennzeichnet wird er durch das Multilpikationszeichen.
Beispiel: * {margin: 1em;}
Jedes Element der Seite erhält einen Außenabstand von 1em.