Was ist CSS?

CSS steht für Cascading Style Sheets und fügt HTML-Elementen eine Formatierung hinzu. Vereinfacht ausgedrückt kann man sagen, dass wir das Aussehen von diesen Elementen beeinflussen. Darunter zählen Schriftart und Farbe bei Texten, Höhe und Breite von Navigationen, genauso wie Schattierung und Hintergrundfarbe von verschiedenen Bereichen.

Hält man dieses Schema konsequent durch, erhält man eine Trennung von Inhalt und Layout. Genau dieses Verhalten ist im Web erwünscht, da wir auf der einen Seite als Benutzer ein wunderschönes Layout sehen und auf der anderen Seite als Entwickler und IT-Begeisterte eine Webseite als Rohmaterial betrachten und auswerten können.

Webdesign mit und ohne Stylesheets - CodingLab

Da HTML-Elemente wie eine Art Baum untergliedert und ineinander verschachtelt werden können, kann der Browser anhand dieser Struktur eine Hierarchie erstellen, das sogenannte Document Object Model (DOM). Die Elemente dieses Models können dann mithilfe von CSS-Regeln formatiert werden.

Die Kaskade

Stylesheetsprachen gibt es mehrere, doch bei CSS handelt es sich um eine kaskadierende Sprache, d.h. wir haben einen stufenartigen Ablauf. Die Style-Anweisungen werden je nach Gewichtung, Ursprung, Spezifität und Reihenfolge ausgeführt. Somit besteht unsere Kaskade aus folgenden Punkten:

  1. Gewichtung
  2. Ursprung
  3. Spezifität der Selektoren
  4. Reihenfolge

Aber warum wurde in CSS eine solche Prüfung implementiert?

Ganz einfach: Um Konflikte zu vermeiden. Sobald Benutzer und Entwickler eigene Namen für Regeln vergeben dürfen, kann es auch immer zu Komplikationen zwischen den einzelnen Stylesheets geben. Was also passiert, wenn für ein und dasselbe Element mehrere Regeln definiert wurden, ist nach der Prüfung der Kaskade eindeutig festgelegt.

Default Stylesheet

Wenn wir eine HTML Dokument erstellen und keine CSS-Eigenschaften definieren, muss der Browser auf eine Art Standard zurückgreifen können. Woher soll dieser sonst wissen, welche Schriftart gewählt werden soll und welche Farbe ein Link hat?

Diese gesamten standardisierten Formatierungen sind im sogenannten Default Stylesheet des Browser festgelegt. Folglich ist dieses Stylesheet in der Hierarchie am geringsten gewichtet.

User- und Autoren-Stylesheet

Mittlerweile erlauben es die meisten Browser eigene Stylesheets anzulegen. Dieser werden als Benutzer-Stylesheet oder auch User-Stylesheet bezeichnet und sorgen dafür, dass man das Web an seine eigenen Bedürfnisse anpassen kann. Ist der Text auf jeder zweiten Webseite zu klein? Dann sollten wir dem Browser doch einfach mitteilen, dass wir ab sofort jeden Text mit der Schriftgröße 20px angezeigt bekommen möchten.

Die Stylesheets der Entwickler heißen Autoren-Stylesheets und geben das Webdesign wieder, so wie es bei der Erstellung der Webseite gemeint war. Beide Versionen (Benutzer- und Autorenstylesheet) sind bei der Mehrzahl der Browser gleich gewichtet. Aus diesem Grund müssen wir hier auf andere Vergleiche zurückgreifen: Die Spezifität der Selektoren.

Spezifität der Selektoren

Bei der Spezifität teilt man Selektoren (alles was vor den geschweiften Klammern steht) in Gruppen ein. Oftmals kann eine CSS-Regel auf mehrere Gruppen zutreffen. Ist dies der Fall werden die Punkte der Reihe nach gesetzt und die Regel mit dem höchsten Wert angewendet.

GruppeBeschreibungPunkte
ACSS-Regeln, die durch ein style="" Attribut direkt im Quelltext definiert werden, besitzen die höchste Wertigkeit. Das HTML-Attribut ersetzt den CSS Selektor.1,0,0,0

oder

1000
BHier wird die Anzahl der id="" Attribute eines Selektors festgehalten, wobei diese die zweithöchste Gewichtung besitzen.0,1,0,0

oder

0100
CHier wird die Anzahl aller class="" und attribut="" Selektoren sowie Pseudoklassen (bspw. :hover) innerhalb des Selektors erfasst, wobei diese die dritthöchste Priorität erhalten.0,0,1,0

oder

0010
DDie Elemente und Pseudoelemente (bspw. ::first-line) werden innerhalb des Selektors angegeben. Für diese Elemente gilt die niedrigste Gewichtung.0,0,0,1

oder

0001

Ausnahmen bei der Spezifität

Eine große Ausnahme bei der Bestimmung der Spezifität stellt die sogenannte !important-Regel dar. Durch diese Regel werden CSS-Anweisungen höher gewichtet. Doch was passiert nun, wenn Benutzer als auch Entwickler diese Regel benutzen?

Seit Mai 1998 gibt es das CSS Level 2 (CSS2), welches klar festlegt, dass das Benutzer-Stylesheet den Vorrang bekommt. Diese Festlegung ist auf den einfachen Gedanken gestützt, dass der Benutzer immer das Vorrecht haben sollte, eine Webseite aussehen zu lassen, wie er es sich wünscht.

Die eindeutige Stylesheet-Gewichtung

Der Browser geht bei verschiedenen Einbindung der Stylesheets zusammenfassend wie folgt vor:

  1. Eigenschaften des Benutzer-Stylesheets und !important
  2. Eigenschaften des Autoren-Stylesheets und !important
  3. Eigenschaften des Autoren-Stylesheets
  4. Eigenschaften des Benutzer-Stylesheets
  5. Eigenschaften des Default-Stylesheets