Rangfolge
Die Angaben von CSS-Stilen wird auf folgende Elemente vererbt. Wird z.B. dem Elementenselektor <body> Eigenschaften für die verwendete Schrift und Schriftfarbe zugewiesen, so gelten diese Angaben für alle Elemente, die von <body></body> umschlossen werden. Diese Vererbung wird jedoch (in der Regel) durch weitere CSS-Angaben unterbrochen, d.h. überschrieben. So können aufgrund einer Definition für <body> und Definitionen für <p> oder <ul> wiedersprüchliche Definitionen entstehen. Hier entscheidet die Regel der Kaskadierung/Vererbung, welche Stile wann weitergegeben werden.
1) Angaben zu spezifischeren Elementen überschreiben
Angaben zu allgemeineren Elementen
Wird nun z.B. für <p></p> eine abweichende Eigenschaft
eingetragen, so überschreibt diese in der Darstellung die Definitionen
für <body>. Dies geschieht, da als Grundregel die spezifischere
Definition die allgemeinere Definition überschreibt. Die Definition
für einen Absatz <p></p> beschreibt ein spezifischeres
Element als <body>.
Wird z.B. eine Definition für <p> angelegt, ein beliebiger <p> innerhalb des XHTML-Dokuments jedoch durch einen Class-Selektor (class="") oder einen ID-Selektor erweitert, so gilt der Class-bzw. der ID-Selektor höherwertiger, da spezifischer ist.
2) Die zuletzt angegebene Definition überschreibt
die vorhergehende
Dies bedeutet: wird in einem externen CSS eine Definition für
<h1></h1> angelegt, im Dokumentenkopf einer verknüpften
XHTML-Datei liegt aber eine differente Definition für <h1>
vor, so liegt die im Kopfteil der XHTML-Datei abgelegte Definition näher
am eigentlichen <h1>-Tag als die Definition im externen Stylesheet
und überschreibt diese daher. Wird nun in diesem Dokument ein spezieller
<h1>-Tag nochmals spezifiziert durch das Attribut style (und neuen
Eigenschaften), so liegt diese Angabe noch "näher" am Element,
und überschreibt daher alle vorhergehenden Definitionen.
3) Als wichtig definierte Angaben gelten vorrangig
vor allen anderen Angaben
Eine CSS-Stil kann durch den Hinweis !important
als besonders wichtig markiert werden. Die so gekennzeichnete Anweisung
überschreibt alle anderen Anweisungen.
Beispiel: h1 {font-size: 12pt !important;}
Hinweis: Grundsätzlich nicht vererbt werden die Eigenschaften margin (äußerer Abstand um ein Element) und padding (innerer Abstand um ein Element)!