!important

CSS ist schon eine tolle Sache, fast wie eine kleine Programmiersprache. Zwei wichtige Prinzipien möchte ich jetzt einmal kurz vorstellen:

Vererbung

In den meisten Programmiersprachen erbt eine spezialisierte Klasse von einer Basisklasse, in dem die erweiterte Klasse die Eigenschaften und Methoden von der Basisklasse übernimmt (meist mit dem Schlüsselwort extends oder <). In CSS gibt es nur Eigenschaften, aber das Vorgehen ist gleich:

h2 {
  border-bottom: 1px solid black;
  display: block;
}

div#headline h2 {
  color: blue;
}

Der normale h2-Tag wird überall als Blockelement angesehen und unterstreicht den Inhalt. h2-Tags, die sich im div mit der ID headline befinden, erhalten allerdings noch das Farb-Attribut zusätzlich.

Konstanten oder final

In Java bspw. gibt es das Schlüsselwort *final*, welches dafür sorgt, das der Inhalt der Variable nicht mehr geändert werden kann. In CSS geht dies ähnlich; Will man dafür sorgen, das ein Wert unter keinen Umständen nachträglich geändert werden kann, setzte man ein !important dahinter.

h2 {
  color: blue !important;
}

div#headline h2 {
  color: red;
}

Hier erhält der Inhalt aller h2-Tags eine blaue Farbe, auch wenn in anderen Definitionen etwas anderes definiert ist. Natürlich wirkt dieses Beispiel etwas komisch und man denkt sich sicher wenn man richtig hinschaut und keinen Fehler macht, braucht man das doch gar nicht. Wäre da nicht die Kaskadierungsreihenfolge (bzw. die Prioritäten):

Im Browser werden intern alle Stilangaben (symbolhaft) in einem großen Stylesheet gesammelt und anschließend auf das (X)HTML losgelassen. Die Reihenfolge, in welcher die Angaben in das große Stylesheet eingefügt werden, hängt natürlich zum einen von der tatsächlichen Anordnung im Stylesheet ab (der Browser arbeitet sich von oben nach unten durch), aber zum anderen auch von der Prioritätsreihenfolge.

Wenn kein Stylesheet angegeben ist, wird das Browserinterne Stylesheet verwendet (blau unterstrichene Links, große Überschriften, etc.). Wenn eine externe CSS-Datei eingebunden wird, kann diese die Defaulteinstellungen des Browsers überschreiben. Sind zudem im head-Bereich mit dem style-Tag weitere Stilangaben eingebunden, werden diese vorgezogen. Direkt im Tag als Attribut angegebene Stilangaben werden vor allen anderen Angaben vorgezogen - seiden, ja seiden man verwendet das Schlüsselwort !important an einer Stelle der Kette, dann bleibt diese Angabe dauerhaft und wird nicht überschrieben.