CSS, HTML und Javascript mit {stil}

Die CSS-Kaskade

Die CSS-Kaskade löst Konflikte, wenn Regeln in der CSS-Datei, im style-Tag und im style-Attribut eines HTML-Tags vorkommen.

Obwohl CSS in einzelnen Regeln so einfach ist, kommt es immer wieder vor, dass Änderungen von CSS-Stilen keine Wirkung zeigen. Häufig liegt dann eine weitere CSS-Regel für dasselbe Element an anderer Stelle – z.B. im style-Tag im Head der HTML-Datei.

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