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