Die CSS-Kaskade

CSS Kaskade, cascading

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.

18-12-15 SITEMAP

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
  1. Eine CSS-Eigenschaft überschreibt die vom Browser vorgegebene Eigenschaft.
  2. Führen CSS-Stile zu Konflikten innerhalb des globalen Stylesheets, übertrumpft die Regel, die zuletzt im globalen Stylesheet aufgeführt wird.
  3. Eine genauer definierte Stylesheet-Regel überschreibt eine weniger genau deklarierte Regel.
    .post h4 { color: teal; }
    h4 { color: darkorange; }
    
  4. 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>
    
  5. 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.

CSS in der Browser-Console untersuchen