CSS-Kaskade leicht erklärt | CSS-Kaskadierung

Die CSS-Kaskade erhielt meiner Meinung nach schon einen passenden Namen. Wer sich schon einmal mit CSS befasst hat, der weiß noch lange nicht, in welcher Reihenfolge welche Deklaration greift. Man hat mehrere Möglichkeiten CSS einzubinden, welche sich gegenseitig überschreiben können. Im Folgenden werden die einzelnen CSS-Typen sowie Einbindungsmöglichkeiten beschrieben und erklärt, wie man die Gewichtung der einzelnen Styles errechnen kann.

CSS-Kaskadierung steckt im Namen

Die Kaskadierung von CSS steckt bereits im Namen, denn CSS bedeutet „Cascading Stylesheets“ und bedeutet so viel wie „Kaskadierende Gestaltungsangaben“. Es wurde entwickelt, um Gestaltung von dem Inhalt einer Webseite zu trennen. Früher wurden Webseiten mit dem Quelltext an sich gestaltet, was zu unendlich großen und aufwendigen Layout-Tabellen führte. Dies blähte nicht nur den Code unnötig auf, sondern machte einen Quelltext quasi unlesbar. Die Interpretation eines Stylesheets erfolgt von oben nach unten. Stellt man sich dies nun als Kaskade vor, so hat das Wasser, oder besser gesagt unser CSS am Anfang wenig Kraft, jedoch weiter unten, wie herabfallendes Wasser in der Kaskade erheblich mehr und hat damit eine höhere Gewichtung.

Deswegen ergibt sich der leicht veränderte Leitsatz: “Wer zuletzt kommt, mahlt zuerst”.

Stylesheet Hierarchie

Bevor die einzelnen Gewichtungen innerhalb eines Stylesheets berechnet werden, werden die einzelnen Style-Angaben alleine schon aus Prinzip überschrieben. Demnach gibt es folgende Stylesheet-Typen:

1. Das Browserstylesheet

Jeder Browser zeigt schon aus Prinzip bestimmte Elemente anders an, damit diese bei einer Standardausgabe auch zu erkennen sind, sodass auch jeder Browser seine „Handschrift“ nachweisen kann. Dies tritt häufig bei Formularen, oder „Senden-Buttons“ auf. Das Browserstylesheet ist jedoch das erste, das überschrieben wird.

2. Das Benutzerstylesheet

Das Benutzerstylesheet sind CSS-Angaben, die der User selbst bei sich im Browser einstellt. Das beste Beispiel hierfür ist ein größerer Text für ältere User, die einen kleinen Text nicht so gut lesen können und deswegen die Schrift im Browser vergrößern. Das Benutzerstylesheet ist einen Schritt weiter als das Browserstylesheet – es ist demnach gewichtiger.

3. Das Autorenstylesheet

Das Autorenstylesheet ist das Stylesheet mit der höchsten Gewichtung und überschreibt die beiden anderen Stylesheets. Es sind die Angaben, wie die Seite erscheinen soll und die vom Designer oder Autor der Seite angegeben werden. In der Kaskade ist dies der Endpunkt in den einzelnen Stylesheets – es ist das Ende der Kaskade und hat damit am meisten Gewicht. Das Autorenstylesheet kann auf drei Wegen eingebunden werden:

1. durch eine externe CSS-Datei, die im Head eingebunden wird

	
	    <link rel='stylesheet' href='/css/autorenstylesheet.css' type='text/css' />
	

2. durch interne CSS-Definition, die direkt im Head des Dokumentes steht

	
	    <style>        
	/* CSS direkt im Dokument */        
	.text-red {            
	color: rgb(255,0,0);        
	}    
	</style>
	

3. durch Inline-Styles, die im jeweiligen Tag durch <p style=“…“> angegeben werden.

Berechnung der Spezifität der CSS-Anweisungen

Doch innerhalb eines Stylesheets können sich diverse Angaben untereinander auch überschreiben. Die Kaskade wird dabei errechnet, wie nah die Deklaration am Element selbst dran ist. So ist p {color:red;} nur ein Elementselektor, den jedes <p> im Dokument anspricht. Jedoch ist p.klasse {color:green;} viel näher am einzelnen Element <p class=“klasse“> dran, welches die erste Deklaration überschreibt.

Nach dieser Tabelle hätte die Deklaration #nav a.foo {color:red;} demnach eine Gewichtung von 111. Zur Erläuterung: der ID-Selektor hat eine Gewichtung von 100, der Klassenselektor eine von 10 und zuletzt der Elementselektor eine Gewichtung von 1. Zusammen addiert ergibt dies die gesamte Gewichtung des vorliegenden Selektors. Dagegen hätte die Deklaration a {color:green} nur eine Gewichtung von 1 und würde definitiv überschrieben werden. Es gibt jedoch eine Ausnahme – Deklarationen mit dem !important-Attribut.

Der “GOD-Modus” für die CSS-Kaskade mit !important

Wer gegen den Regen kämpfen will, der braucht Thor’s Hammer. Dies wäre bei CSS das !important-Attribut. Das !important-Attribut kennzeichnet CSS-Deklarationen mit oberster Priorität und wird, einmal geschrieben, nicht mehr überschrieben. Eine solche Kennzeichnung sieht so aus: p {color: red !important;} – dies würde bedeuten, dass alle Paragraphs im HTML mit rotem Text versehen werden würden. Außerdem könnte diese Definition auch nicht durch Inline-Styles überschrieben werden. Zusätzlich sollte noch erwähnt werden, dass die Kennzeichnung !important nicht vererbt wird. Wenn ich in CSS normalerweise etwas definiere – beispielsweise p {color:red;}– dann würde ein anderes Element, welches sich innerhalb dieses <p>-Tags befindet (beispielsweise <p>Im Paragraph <span>ist noch ein anderer Tag</span></p>), die gleiche Anweisung wie das <p> erhalten. !important bezieht sich demnach wirklich nur auf das Element, welches es direkt anspricht und beeinflusst keine anderen Tags die sich dazwischen befinden.

Die CSS-Kaskadierung zusammengefasst

Folgende Liste fasst die CSS-Kaskade noch mal zusammen vom am wenigsten wichtigen Stylesheet bis hin zum wichtigsten Stylesheet und der CSS-Deklaration mit der obersten Priorität:

• 1. Browserstylesheet
• 2. Benutzerstylesheet
• 3. Autorenstylesheet

  • externe CSS-Datei
  • <style>-Anweisung im HTML <head>
  • Inline-Styles
  • !important-Attribut