Wenn Sie zwei oder mehr CSS-Regeln auf denselben Text anwenden, kann es zu Konflikten zwischen den Regeln und zu unerwarteten Ergebnissen kommen. Der Browser wendet CSS-Regeln wie folgt an:
Wenn zwei Regeln auf denselben Text angewendet werden, zeigt der Browser alle Eigenschaften beider Regeln an, es sei denn, bestimmte Eigenschaften widersprechen. Beispielsweise könnte eine Regel festlegen, dass die Textfarbe Blau ist, während eine andere Regel festlegen könnte, dass die Textfarbe Rot ist.
Wenn die Eigenschaften zweier Regeln, die für denselben Text gelten, in Konflikt stehen, zeigt der Browser die Eigenschaften der innersten Regel an (die Regel, die dem Text selbst am nächsten liegt). Wenn also sowohl ein externes Stylesheet als auch ein Inline-Stil ein Textelement beeinflussen, wird der Inline-Stil angewendet.
Eigenschaften in benutzerdefinierten CSS-Regeln (Regeln, die mithilfe des Klassenattributs angewendet werden) überschreiben Eigenschaften in HTML-Tag-Stilen, wenn ein direkter Konflikt besteht.
Im folgenden Beispiel gibt der für h1 definierte Stil die Schriftart, Größe und Farbe aller h1-Absätze an, aber die auf diesen Absatz angewendete benutzerdefinierte CSS-Regel .Blue überschreibt die Farbeinstellungen im h1-Stil. Eine andere benutzerdefinierte CSS-Regel, .Red, überschreibt .Blue, da sie sich im .Blue-Stil befindet.
<h1><span class="Blue">Dieser Absatz wird durch den benutzerdefinierten .Blue-Stil und h1 gesteuert
HTML-Tag-Stil.<span class="Red">Außer dieser Satz wird durch den .Red-Stil gesteuert.</span>
Jetzt sind wir wieder beim .Blue-Stil.</span></h1>