Was ein Style Sheet ist, können wir mittlerweile gut beurteilen, wir haben ja nun selbst ein erstes geschrieben. Zwar enthält es bisher nur eine Regel, aber immerhin ist das ein Anfang. Bleibt noch offen, was genau das "Cascading" in "Cascading Style Sheet" bedeutet, also die Kaskade, die sich innerhalb des Style Sheets abspielt.
Die Wirkungsweise von Regeln innerhalb von CSS lässt sich zunächst am besten dadurch beschreiben, dass die in einer CSS-Regel definierten Eigenschaften vom übergeordneten Element oder Knoten innerhalb der hierarchisch aufgebauten HTML-Struktur an die von ihm eingeschlossenen Elemente vererbt, d.h. übertragen werden. Innerhalb der baumartig aufgebauten HTML-Struktur, die auch als Seitenbaum bezeichnet wird, entsteht somit eine Kaskade: die Eigenschaften werden von den übergeordneten Elementen weitergereicht an die Nachfolgeelemente. Der Umgang mit Vererbung und die Kontrolle der Kaskade bereitet Anfängern zwar oftmals Schwierigkeiten, jedoch ist das Verhalten recht logisch, wenn man sich gedanklich damit angefreundet hat.
Beginnen wir mit einem Beispiel und erweitern unser bisheriges Style Sheet. Wenn wir die Schriftart für unsere Beispielseite nicht nur für die Überschrift h1, sondern für alle Elemente ändern wollen, müssten wir ohne Vererbung nun die Deklaration der "font-family" für alle in Frage kommenden Tags wiederholen: p, h2, header, footer etc.
Durch die Vererbung (engl. Inheritance) geht das aber eleganter: Wir definieren die Schriftart für ein übergeordnetes Element in der HTML-Hierarchie, den <body>-Tag und diese Eigenschaft wird an die nachfolgenden Elemente vererbt.
<style>
/* Unsere ersten CSS-Regeln */
body {
font-family: Arial,sans-serif;
}
h1 {
color: #404040;
/* gleich wie: color: rgb(64,64,64); */
font-weight: normal;
font-style: italic;
font-size: 35px;
text-transform: uppercase;
}
</style>
Dies kleine Änderung führt tatsächlich dazu, dass nun sämtlicher Text auf unserer Seite in Arial "gerendert", d.h. ausgegeben wird. Wir haben uns also die Vererbung von CSS zunutze gemacht, um die Ausgabe im Browser gezielt und mit möglichst wenig Regeln zu kontrollieren.
Nun landen wir an dieser Stelle auch fast automatisch bei der Frage, wo diese Schriftfamilie, die wir hier per CSS neu definiert oder überstimmt - man sagt auch "überschrieben" haben, überhaupt vorher festgelegt war. Woher kommt eigentlich der Look einer HTML-Seite, die nur aus HTML ohne CSS besteht?
Dazu sollte man wissen, dass jeder Browser ein sogenanntes "Default style sheet" (deutsch: "Browser-Stile") mitbringt, das dazu führt, dass auch pures HTML einigermaßen "ordentlich" aussieht. Denn die Überschriften bekommen unterschiedliche Schriftgrößen und sind fett, die Elemente werden mit passenden Abständen nach oben und unten versehen, Links sind blau und unterstrichen und noch einiges mehr. Diese Browser-Stile sind von Browser zu Browser leicht unterschiedlich aber insgesamt sind sie relativ ähnlich.
Will man nun einer HTML-Seite einen eigenen Look per CSS verpassen, so überstimmt man die Browser-Stile gezielt mit eigenen CSS-Regeln, um die gewünschte Darstellung zu erreichen (Eine Alternative dazu sind sogenannte CSS-Resets, die in einem ersten Schritt versuchen, alle Browser-Stile im Stylesheet zurückzusetzen, um mit dem eigenen Look quasi bei Null anzufangen). Indem man die CSS-Voreinstellungen des Browsers überschreibt, nutzt man ein weiteres wesentliches Wirkprinzip von CSS, das es neben der Vererbung zu beachten gilt: Die Vererbung von Stilen lässt sich gezielt durchbrechen, in unserem Fall durch Regeln, die das gleiche Element (z.B. eine Überschrift) betreffen, aber später kommen (in der Ladereihenfolge des Browsers). In unserem Beispiel: Der Überschrift h1 war zunächst bereits im Browser-Stil eine bestimmte Größe, Stärke etc. zugewiesen worden. Durch unsere eigene Regel im Inline-Stylesheet, die nach dem Browser-Stylesheet eingelesen wird, wird dies Vorgabe wieder überstimmt. Würden wir weiter unten in unserem Stylesheet wieder eine andere Regel für h1 schreiben, so würde sich diese wiederum - zumindest bezüglich der definierten Eigenschaften - durchsetzen.
Diese gegensätzlichen Mechanismen von Vererbung und gezieltem Durchbrechen der Kaskade durch spätere Regeln ist ein entscheidendes Element von CSS und für Einsteiger eine Herausforderung. In unserem Beispiel erscheint dies noch alles recht übersichtlich und damit beherrschbar. Stellen wir uns aber ein (nicht unübliches) Stylesheet mit hunderten Zeilen CSS-Deklarationen vor, dann ist nicht immer sofort klar, welche Regeln für ein Element gelten und wo eine Regel oder Deklaration die vorherige überschreibt. Dies wird dadurch noch komplizierter, dass es neben der zeitlichen Abfolge der Regeln auch noch einen weiteren Faktor gibt, der die Vererbung durchbrechen kann. Die sogenannte "Spezifizität" einer Regel lernen wir aber erst etwas später kennen.
Ist man also als Webdesigner oder -entwickler alleine auf seinen Editor und eine rundum logisch strukturiertes und durchdachtes Stylesheet angewiesen, um das gewünschte Design dem Browser zu "verklickern"? Ist es denn überhaupt möglich, dass man ein Stylesheet versteht, bearbeitet, weiter entwickelt, dass man gar nicht selbst geschrieben hat oder an dem man länger nicht gearbeitet hat? (eine häufige Aufgabe im Bereich der professionellen Webentwicklung)
Zum Glück gibt es dafür das "magische Tool" des Webentwicklers, das neben dem Editor unverzichtbar ist bei der Arbeit am Design und Funktionalität von Websites. Nein, es ist kein teures Produkt eines kalifornischen Softwaregiganten. Vielmehr ist der Browser, das heißt das Anzeigegerät selbst, das uns die nötigen Werkzeuge kostenfrei zur Verfügung stellt. Die gängigen Browser enthalten nämlich eine regelrechte Toolbox für die Analyse und das Debugging von Websites, allerdings ist das dem normalen Nutzer weitgehend unbekannt. Diese Tools finden sich an unterschiedlicher Stelle in den Menüs der Browser unter Bezeichnungen wie "Entwicklertools" (Chrome) oder "Web-Entwickler" (Firefox). Eine Einführung in diese mächtigen Werkzeuge erhalten Sie im nächsten Abschnitt.
> weiter