Rangordnung verschiedener Stilvorlagen
Bei der Darstellung eines HTML-Dokuments kommt es normalerweise zum Zusammenspiel verschiedener Stilvorlagen. So benutzen die Browser ihre eigenen Standardstilvorlagen für HTML-Elemente, Benutzer können in ihrem Browser eigene Stilvorlagen vorgeben und wir als Webentwickler haben unsere Stilvorlagen im HTML-Dokument verlinkt oder direkt eingefügt. Welche Stilanweisungen werden nun ausgeführt?
Die Prioritäten sind genau in der umgekehrten Reihenfolge zur obigen Darstellung: Die im HTML-Dokument angegebenen Stilvorlagen haben die höchste Priorität. Es folgen die benutzereigenen Stile und dann erst die Browservorlagen. Letztere kommen also nur zum Tragen, wenn sie nicht durch den Benutzer oder das HTML-Dokument überschrieben werden.
Dieses "Durchreichen" der HTML-Elemente durch die verschiedenen Stilvorlagen nennt man auch Kaskadierung. Daher kommt übrigens auch das C in CSS, nämlich vom Englischen cascading. Das betrifft nicht nur die Herkunft der Stilvorlagen (also ob vom Browser, vom Benutzer oder im HTML-Dokument), sondern auch die Reihenfolge innerhalb der CSS-Quelltexte. So überschreiben später aufgeführte CSS-Regeln früher auftretende Regeln, welche sonst dieselbe Priorität hätten.
Priorität durch Spezifität
Damit kommen wir zu einer weiteren wichtigen Fragen: Welche Regeln innerhalb eines Dokuments haben Vorrang? Die Antwort darauf ist die Spezifität: Je spezifischer ein Selektor ist, desto höher ist die Priorität der Regel, die dem Selektor folgt. Dabei gilt: id-Selektoren sind spezifischer als class-Selektoren und class-Selektoren sind spezifischer als type-Selektoren. Durch Kombination mehrerer Selektoren erhöht sich die Spezifität und damit die Priorität.
Eine genaue Berechnung der Spezifität ist normalerweise nicht nötig. Wenn wir unseren CSS-Code sinnvoll aufbauen, dann haben wir nicht viele Regeln darin, die sich gegenseitig widersprechen, sodass es keine problematischen Konflikte gibt.
Vererbung
Ein HTML-Dokument enthält in der Regel sehr viele Elemente. Es wäre sehr umständlich, wenn wir für jedes davon eigene CSS-Regeln aufstellen müssten. Zum Glück gibt es die Vererbung von Eigenschaften in CSS! HTML-Elemente übernehmen viele CSS-Eigenschaften (wie zum Beispiel die Schriftart oder die Schriftfarbe) von den Elementen, in denen sie sich befinden. Dies ermöglicht es uns, manche Stilangaben nur einmal zu machen, sodass sie sich aber trotzdem auf viele Elemente auswirken. Wenn wir z.B. eine Schriftart für den <body>-Tag festlegen, so haben alle Elemente innerhalb des <body>-Tags dieselbe Schriftart, wenn ihnen nicht explizit eine andere Schriftart zugewiesen wird.
Welche Eigenschaften standardmäßig vererbt werden und welche nicht, muss im Einzelnen nachgeschaut werden. Bevor man anfängt, eine Regel für (fast) alle Elemente aufzuschreiben, lohnt sich also auf jeden Fall ein Blick auf die Definition der entsprechenden CSS-Eigenschaften.