Verschachtelte Elemente, Klassen und individuelle Formate

CSS: Verschachtelte Elemente, Klassen und individuelle Formate

Verschachtelte Elemente

Oft ist es sinnvoll, <tags> unterschiedlich zu formatieren, je nachdem in welchem Kontext sich diese befinden.
Möglicherweise möchte man Überschriften in einer Tabellenzelle anders formatieren als außerhalb. Das realisiert mit CSS, indem man den Selektor folgendermaßen beschreibt:

HTML:

<h2>Erste Überschrift</h2>
<table border="1">
<tr>
<td></td>
<td><h2>Zweite Überschrift</h2></td>
</tr>
</table>

CSS:

h2 {
color: red;
}

td h2 {
color: green;
}

ergibt:

Erste Überschrift

Zweite Überschrift

Weitere Informationen dazu auf w3schools!

Klassen

In HTML gibt es das Universalattribut class, das Sie im Start-Tag eines jeden Elements notieren können, um verschiedene Elemente zu einer Klasse zusammen zu fassen. Diese Elemente gehören dann logisch zusammen. Möchte man beispielsweise in einem Text Absätze <p> verschieden formatieren, einige mit blauer, einige mit roter Schrift, könnte man das mit Klassen folgendermaßen realisieren:

p.klasse1 {color: red;}

p.klasse2 {color: blue;}

Mit der Syntax dieses Beispiels werden alle Elemente <p>, die der Klasse "klasse1" angehören mit roter Schrift ausgezeichnet, alle Elemente <p> der Klasse "klasse2" mit blauer. Im Grunde könnte man das "p" vor dem Selektor auch weg lassen: Dann würden alle <elemente>, die mit der jeweiligen Klasse ausgezeichnet sind (also auch z.B. <h1 class="klasse1">) entsprechend formatiert.

HTML:

<p class="roteschrift">Erster Absatz</p>
<p class="blaueschrift">Zweiter Absatz</p>

CSS:

p.roteschrift {color: red;}
p.blaueschrift {color: blue;}

oder

.roteschrift {color: red;}
.blaueschrift {color: blue;}

ergibt:

Erster Absatz

Zweiter Absatz

Weitere Informationen zum class-Selektor auf w3schools!

Individuelle Formate

HTML-<elemente>, die durch das Universalattribut id="" eindeutig bestimmt sind, können in CSS gesondert formatiert werden. Dies wird mit der id und einem vorgestellten Präfix # realisiert:
#beliebige_id {color: red;}

HTML:

...
    <h1 id="ueberschrift_header">blaue kursive &Uuml;berschrift</h1>
...

CSS:

#ueberschrift_header {
     color: blue;
     font-style: italic;
}

ergibt:

blaue kursive Überschrift

Achtung: ID's dürfen pro Seite nur einmal vorkommen!

Weitere Informationen zum ID-Selektor auf w3schools!

Ein tolles Online-Spiel zum Üben von Selektoren gibt es hier!

Wer schafft alle 32 Level? :)