Stoßen mehrere Stylesheets aufeinander (z.B. die Standardeigenschaften vom Browser für Elemente wie h1 und Links zum einen, ein externes Stylesheet der Website und zusätzlich noch eine Inline-Styleangabe) so stellt sich die Frage, welche Eigenschaften sich durchsetzen, wenn 2 oder mehrere Stylesheets das Aussehen desselben Elements bestimmen wollen. Dabei gilt, dass sich die Eigenschaften durchsetzen die am nächsten zum Element stehen.

Folgende Hierachie gibt es, umgesetzt wird immer die höchstmögliche Stufe in dieser Hierarchie:

Default-Einstellungen des Browsers
externe Style Sheets; werden mehrere externe Style Sheets mit einem Dokument verlinkt, haben im Konfliktfall die in der zuletzt eingelesenen CSS-Datei enthaltenen Anweisungen Vorrang;
eingebettete (im Dokumentskopf definierte) Style Sheets;
inline-Stilvorgaben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Kaskadierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
h2 {
  font-weight: bold;
} 
 
h3 {
  color: darkred;
} 
/* ]]> */
</style>
</head>
<body>
<h1>Die wichtigste Überschrift, weil es keine weiteren Stilangaben gibt werden die Standardeinstellungen des Browsers umgesetzt</h1>
<h2>Die zweitwichtigste Überschrift, hier gibt es eine interne Stilangabe, diese wird auch verwendet.</h2>
<h3 style="font-color: black;">Die drittwichtigste Überschrift, hier gibt zusätzlich zu einer internen Stilangabe auch eine Inline-Angabe, also setzt sich diese durch.</h3>
<p class="wichtig">Beispielabsatz</p>
<p class="wichtig" style="color: white">Beispielabsatz</p>
 
</body>
</html>

Wie bereits bekannt, kann man mehrere (X)HTML-Elemente ineinander verschachteln und somit können durch die Vererbung einem Element verschiedene Werte für die gleiche CSS-Eigenschaft zugewiesen werden. Dabei gilt: Es setzt sich der Wert durch, der am spezifischten für das jeweilige Element ist.

Beispiel:

Es gibt eine div-Box, die für font-size den Wert 12pt zugewiesen bekommt.
Darin gibt es zwei p-Boxen (also Absätze),
- eine davon weist font-size den Wert 10pt zu,
- die andere setzt diese Eigenschaft nicht.
- Dann gilt bei der ersten p-Box die spezifischte Eigenschaft, also 10pt.
- Bei der zweiten p-Box gilt die allgemeine Eigenschaft der übergeordneten Box (12pt), weil es keine eigene Eigenschaft dazu gibt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="content-language" content="de" />
   <title>TITEL</title>
 
<style type="text/css">
/* <![CDATA[ */
	div {
		font-size: 12pt;
	}
/* ]]> */
</style> 
</head>
<body>
<div>
	<p style="font-size: 10pt;">Das ist der Absatz mit 10pt Schriftgröße.</p>
	<p>Das ist der Absatz, der font-size nicht festlegt -> es gilt 12pt von div</p>
</div>
</body>
</html>

11.2.3.2) Kaskadierung und Spezifität

Kaskadierung

Spezifität

Links