CSS-Kaskade

Aus dem Quelltext stellt das Browser-Programm das Bild der Webseite her (Rendern).
Dazu braucht das Programm Anweisungen (ein 'Programm'), welches regelt, wie die Elemente darzustellen sind. Der → CSS Standard legt fest, wie diese Regeln abzufassen sind.


Das Diagramm stellt die 'Kaskade' von 'Cascading StyleSheets' (CSS) dar:

Jedes Browser-Programm ladet anfangs einen Satz von CSS-Regeln. Darin sind einfache Anweisungen für alle Typen von HTML-Elementen enthalten.
Beispiel ↓ auf dieser Seite

Jedes professionelle Web verwendet (mindestens) eine → CSS StyleSheet‑Datei. Darin sind jene Regeln enthalten, die auf alle Webseiten anzuwenden sind. Mit den Regeln des StyleSheets werden alle vorher geltenden überschrieben und ergänzt.
Beispiel ↓ auf dieser Seite

In der nächsten Stufe wird in jeder Webseite nach → einem <style>‑Element gesucht (das sich normalerweise innerhalb des <head>‑Elements befindet.
Bei einem Treffer werden die geltenden Regeln durch die darin enthaltenen ersetzt und ergänzt. Diese Stufe von Änderungen gilt jedoch nur für jenes Dokument, in dem das <style>-Element enthalten ist.
Beispiel ↓ auf dieser Seite

In der letzten Stufe der Kaskade wird nach Regeln gesucht, die nur für einzelne Elemente einer Webseite anzuwenden sind. Dazu kann man in jedes HTML‑Element → ein style‑Attribut einfügen.
Beispiel ↓ auf dieser Seite

Hinweise ↓ zur hier verwendeten Objekt-Grafik


CSS-StyleSheet-Datei


Browser-Ansicht

Hier ist eine Mini-Webseite eingebettet, die zur Formatierung eine CSS StyleSheet-Datei verwendet.

HTML-Quelltext

So sieht der HTML-Quelltext der Mini-Webseite aus.
Im <head>-Element befindet sich ein <link>-Element, mit dem die angegebene CSS-StyleSheet-Datei eingebunden wird.

CSS-Quelltext

So sieht der CSS-Quelltext der von der Mini-Webseite verwendeten CSS-StyleSheet-Datei simple.css aus.



Mit dieser Technik wird das Aussehen von beliebig vielen Seiten eines gesamten Webs zentral gesteuert.
Man kann jede CSS-Regel nachträglich ändern: Dazu ändert man den CSS-Quelltext an einer einzigen Stelle - in der StyleSheet-Datei.
Die neue Regel wird in jede danach angeforderte Webseite automatisch übernommen.


Man kann die StyleSheets problemlos mit jedem Text-Editor-Programm oder besser mit einem Web-Editor modifizieren.
Erstellen sie vorher eine Sicherungs-Kopie des Original Stylesheets.



Um exotische Formatierungen aufzuspüren, testen sie zumindest einige eigene Webseiten mit mehreren Browsern / Versionen.
Dieses Web wird schon seit einiger Zeit mit Firefox, Chrome, MSIE, Safari und Opera (jeweils in mehreren Versionen) getestet. Trotzdem finden sich immer wieder überraschende Formatierungen, die umgehend mit Hilfe des StyleSheets korrigiert werden...



CSS bietet die Möglichkeit, beliebig viele Regeln unter einem gemeinsamen Namen als CSS-Klasse zusammenzufassen, so ähnlich wie für die Format-Vorlagen der Textverarbeitung.
Beispiel:
.rero{text-align:right; color:red;}
Die Regel bestimmt, dass der Text in roter Farbe rechtsbündig ausgerichtet wird. Zur Anwendung auf ein HTML-Element verwendet man ein class-Attribut, z.B.
<div class="rero">Rechts+Rot</div>
Rechts+Rot
Das Ergebnis sieht so aus:

CSS bietet noch viele andere Varianten von Selektoren. Beachten sie bei der Anwendung die ↓ Reihenfolge und verwenden sie zuerst allgemeine Selektoren, erst danach spezielle.

CSS-Selektoren bei SelfHTML



Die Reihenfolge der Regeln gilt unabhängig davon, auf welche Weise sie angegeben wurden: Allgemeine Regeln werden zuerst formuliert, danach folgen Regeln für größere Gruppen von Elementen, zuletzt für einzelne Elemente.

Daher trägt man in eine Webseite zuerst das <link>-Element zur Verknüpfung mit der Stylesheet-Datei ein. Erst danach folgt ein allfälliges ↓ <style>-Element, zuletzt folgen Regeln mit individuellen ↓ style-Attributen.

Ein Browser-Programm braucht zur Darstellung einer Webseite umso weniger Arbeit und Zeit, je früher die zu verwendenden CSS-Regeln bekannt sind. Daher ist ein CSS-Stylesheet besonders effizient, style-Attribute sind möglichst zu vermeiden.

Wenn man zahlreiche Regeln formuliert, dann werden zwangsläufig viele allgemeine Regeln durch zunehmend spezielle überschrieben. Wenn die Formatierung trotz korrekter Syntax ('Grammatik') nicht den Erwartungen entspricht, dann sollte man den Fehler nicht durch noch mehr CSS-Regeln korrigieren, sondern besser die Reihenfolge der vorhandenen Regeln kontrollieren und korrigieren.

CSS  <style>-Element


Browser-Ansicht

Hier ist eine Mini-Webseite eingebettet, die zur Formatierung sowohl eine zentrale CSS StyleSheet-Datei als auch ein individuelles <style>-Element verwendet.

HTML-Quelltext

So sieht der HTML-Quelltext der Mini-Webseite aus.
Im <head>-Element befindet sich ein <link>-Element, mit dem die angegebene CSS-StyleSheet-Datei eingebunden wird.
Erst danach (!) werden dessen Regeln mit einem <style>-Element modifiziert.

CSS-Quelltext

In diesem Beispiel wird die gleiche StyleSheet-Datei simple.css verwendet wie im ↑ vorigen.
Diese Regeln werden hier jedoch durch die im <style>-Element enthaltenen überschrieben oder ergänzt.


Im Beispiel wird die Regel zur Formatierung von <h1>-Elementen (Überschriften 1.Ordnung) geändert.
Die geänderte Regel gilt daher für alle in der jeweiligen Webseite enthaltenen <h1>-Elemente.

CSS  style-Attribut


Browser-Ansicht

Hier ist eine Mini-Webseite eingebettet, die zur Formatierung eine zentrale CSS StyleSheet-Datei und ein <style>-Element und individuelle Regeln für einzelne Elemente verwendet.

HTML-Quelltext

So sieht der HTML-Quelltext der Mini-Webseite aus.
Im <head>-Element befindet sich ein <link>-Element, mit dem die angegebene CSS-StyleSheet-Datei eingebunden wird.
Danach werden dessen Regeln mit einem <style>-Element modifiziert.
Zuletzt werden die Regeln mit individuellen style-Attributen abgewandelt.

CSS-Quelltext

In diesem Beispiel wird die gleiche StyleSheet-Datei simple.css verwendet wie in den beiden ↑ vorigen.
Diese Regeln werden hier jedoch zuerst mit jenen eines <style>-Elements und danach durch weitere aus style-Attributen überschrieben oder ergänzt.



Wenn man einen Text indiviell formatieren will, der nicht in einem eigenen HTML-Element enthalten ist, dann schließt man ihn in ein <span> oder <div>-Element ein. Diese HTML-Elemente haben keine andere Aufgabe, als die darin enthaltenen (Text)-Elemente individuell zu formatieren.

Im Beispiel wird das in der Überschrift enthaltene Wort Attribut in ein <span>-Element eingeschlossen. In das <span>-Element wird das style-Attribut mit den gewünschten individuellen CSS-Regeln eingetragen.



Die Vererbung kann allerdings durch andere, vorher festgelegte CSS-Regeln eingeschränkt werden.
Wenn besonders zahlreiche und komplizierte Regeln festgelegt wurden, dann geht manchmal die Übersicht verloren. Manche Elemente werden evtl. nicht so formatiert wie erwartet.

In einem Einzelfall kann man sich helfen: Man umschließt den gewünschten Text mit einem <span>- oder <div>-Element und legt in einem style-Attribut alle CSS-Regeln individuell fest. Das ist jedoch aufwändig und daher für allgemeine Fälle nicht geeignet.

Diagramm (ObjektGrafik)


Auch SVG-Elemente werden mit CSS-Regeln formatiert:
Die hier verwendete Grafik enthält ein CSS <style>-Element mit Regeln für alle in der Grafik verwendeten Objekte.
Einige Grafik-Elemente enthalten style-Attribute, mit denen die geltenden Regeln für das jeweilige Element individuell geändert werden.

▶   Mit diesem Link wird die Mini-Webseite + Grafik in einem eigenen Browser-Tab geöffnet, mit diesem Link die SVG-Grafik.

▶   Mit diesem Link wird der HTML-Quelltext angezeigt, mit diesem Link der SVG-Quelltext.