CSS Kaskade und Important

Cascading

Da legen wir die Schriftgröße in einer CSS-Regel für das body-Tag in der CSS-Datei fest, setzen aber für p-Elemente font-size auf einen spezifischen Wert und ändern anschließend die Schriftgröße für p-Elemente einer CSS-Klasse. Je spezifischer die Regel, desto stärker setzt sie sich durch.

Das läßt sich noch gut nachvollziehen, denn bei CSS-Regeln heißt die Devise

Wer zuletzt kommt, der gewinnt.

CSS-Regeln können aus fünf Quellen kommen:

p { font-size: 16px; }

vom Browser, der eigene Stile mitbringt, wenn keine CSS-Regeln für das Element definiert sind (z.B. Schriftgröße, Farbe und margin für p-Elemente)

p { font-size: 86%; }

aus einer externen CSS-Datei

<style>p { font-size: 86%; }</style>

von CSS-Regeln im style-Tag der Webseite

<p style="font-size: larger;">

aus dem style-Attribut eines HTML-Tags (CSS Inline)

body { zoom: 90%; }

aus dem Stylesheet des Besuchers, wenn der Browser das Laden eines eigenen Stylesheets erlaubt

CSS Cascading and Inheritance Level 3

CSS Konflikte lösen

Wenn CSS-Stile in Konflikt geraten, weil sie extern in der CSS-Datei, im style-Tag, in einer inline-Regel und im Stylesheet des Benutzers unterschiedlich deklariert sind, löst die Kaskade den Konflikt. Die Regel, die dem Element am nächsten liegt, hat die höhere Priorität.

CSS Cascade: Überschreiben von CSS-Eigenschaften

Eine CSS-Eigenschaft überschreibt die vom Browser vorgegebene Eigenschaft.
Führen CSS-Stile zu Konflikten innerhalb des globalen Stylesheets, übertrumpft die Regel, die zuletzt im globalen Stylesheet aufgeführt wird.
Eine genauer definierte Stylesheet-Regel überschreibt eine weniger genau deklarierte Regel.
```
.post h4 { color: teal; }
h4 { color: darkorange; }
```
Ein style-Attribut im HTML-Tag überschreibt eine Eigenschaft aus einer globalen Regel im style-Tag des HTML-Dokuments oder aus einer CSS-Datei. Das style-Attribut im HTML-Tag wirkt also wie eine Regel, die im globalen Stylesheet zuletzt aufgeführt wurde.
```
<style type="text/css" title="text/css" media="screen">
   h4 { color: teal; }
</style>
…
<body>
   …
   <h4 style="color: darkorange;"> … </h4>
   …
</body>
```
Ein CSS-Stil aus dem Stylesheet des Besuchers überschreibt die CSS-Stile des Webdesigners.

Fiese kleine CSS-Fallen

Wenn in der HTML-Datei ein style-Tag vor dem Link zu einer externen CSS-Datei liegt, siegt natürlich die Regel aus der CSS-Datei, da sie nach dem style-Tag geladen wird.

Auch bei zwei Regeln für ein Element innerhalb einer CSS-Datei gilt: Der Letzte macht die Regel.

p { font-size: 0.9em; }
…
…
p { font-size: 0.82em; }

Die Spezifizität der CSS-Deklarationen ist eine weitere Falle:

ul.menu li.active { color: blue; }

überschreibt

li.active { color: red; }

CSS !IMPORTANT-Regel

Diese Regeln können wiederum vom Autor durch das Schlüsselwort !IMPORTANT außer Kraft gesetzt werden.

li { margin: 0 !IMPORTANT; }
…
.featured li { margin: 4px 0; }

Am Ende hat der Besucher wieder die Oberhand, denn er kann auch wieder eine !important-Regel in sein persönliches Stylesheet legen.

CSS in der Browser-Konsole untersuchen

Wer Javascript programmiert kennt die Browser-Konsole, die sich mit einem Rechtsklick und Element untersuchen oder Element-Informationen unter oder neben dem Dokument öffnet.

Hier zeigen die Browser, welche CSS-Stile auf jedes einzelne Element wirken.