Aug 2017

Die CSS-Kaskade

Die CSS-Kaskade löst Konflikte, wenn Regeln in der CSS-Datei, im style-Tag und im style-Attribut zusammenkommen und einander überschreiben: Wer zuletzt kommt, gewinnt.

Obwohl CSS in einzelnen Regeln einfach ist, zeigen Änderungen von CSS-Stilen oft keine Wirkung. Fast immer liegt dann eine weitere CSS-Regel für dasselbe Element an anderer Stelle – z.B. im style-Tag im Head der HTML-Datei.

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

Assigning property values, Cascading, and Inheritance

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 eines 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.