Die Kaskade

Der magische Wasserfall des CSS

Stell dir die Kaskade wie einen majestätischen Wasserfall vor, der über die Felsen deines Stylesheets strömt. Auf seinem Weg nach unten erreicht er jedes Element, doch nicht alle werden gleich nass oder in diesem Fall, gleich verzaubert.

Ganz oben am Wasserfall stehen die Inline-Stile, die wie große, schwere Felsbrocken direkt ins Wasser platschen. Sie haben die meiste Macht, denn sie tauchen direkt am Element auf. Weiter unten, in sanften Wellen, wirken die externen Stylesheets, die eine feine, aber allgegenwärtige Magie ausüben. Doch wenn alles versagt, kommt der !important-Zauber ins Spiel, der Freibrief für einen Zauber, der einfach alle anderen ignoriert und seinen eigenen Weg geht, weil Regeln eben auch mal gebrochen werden müssen!

Los geht’s

Hierarchien
Prioritäten

Die Kaskade

Weil Selektoren um die Vorherrschaft ringen – und manche einfach besser schwimmen können.

Hierarchien

So funktioniert die Kaskade

Auf den verschlungenen Pfaden der CSS-Kaskade herrscht eine geheime Rangordnung, die bestimmt, welche Stile in einem HTML-Dokument das Sagen haben.

Überschreibung innerhalb eines Dokuments:
Regeln mit mehr Spezifizität – also präziseren Selektoren – haben das letzte Wort und überschreiben weniger genaue. Sollte jedoch ein Streit zwischen gleichwertigen Regeln entbrennen, gewinnt die Regel, die weiter unten im Dokument steht.

Hierarchie der CSS-Regeln von niedrigster (1) bis höchster (5) Priorität

Browser-Standard:
Die langweiligen Standardstile, die der Browser für alle Elemente festlegt, bevor deine Magie greift.
Interne & externe Stylesheets
Regeln, die im <style>-tag im Head eingebunden werden sowie externen CSS-Dateien. Das zuletzt eingebundene Stylesheet hat das letzte Wort.

Innerhalb eines Stylesheets:
1. Elementselektoren:
Regeln, die jedem Element desselben Typs etwas überstülpen.
2. Klassenselektoren:
Regeln, die einer Gruppe von
Elementen den gleichen Look
verpassen.
3. ID-Selektoren:
Regeln, die ein einziges, ganz
besonderes Element ansprechen, der VIP-Bereich der CSS-Kaskade.

Inline-Styles:
Das sind die CSS-Regeln, die
direkt im style-Attribut eines HTML-Elements stehen.
!important-Deklarationen:
Und wenn alles in einem chaotischen Durcheinander endet, schreitet der !important-Zauber ein und erklärt sich zum unumstrittenen Herrscher – aber verwende ihn weise, sonst wird’s chaotisch!

In dieser Lektion hast du gelernt…

Wie die CSS-Kaskade funktioniert, indem sie Regeln nach Priorität und Spezifizität ordnet.
Warum spätere CSS-Regeln frühere überschreiben können, wenn sie die gleiche Gewichtung haben.
Wie die Hierarchie der Selektoren aufgebaut ist, von Element- über Klassen- bis hin zu ID-Selektoren.
Warum Inline-Styles stärker sind als Stylesheets, aber externe CSS-Dateien für saubere Struktur sorgen.
Dass !important alle Regeln übertrumpft, aber sparsam eingesetzt werden sollte, um Chaos zu vermeiden.

Der tanzende Wasserfall

Ein Wasserfall ergießt sich über die Felsen von Sunnyside Fields, doch statt reinen Wassers fließen hier Selektoren. Sie tanzen und rauschen, gleiten von den höchsten Gipfeln bis zu den stillen, grünen Tälern, wo sie ihre Kräfte entfalten. Die Reise der Kaskade ist eine Geschichte von Ordnung und Priorität, denn jeder Tropfen, ob stark wie ein ID-Selektor oder sanft wie ein Element, hat seinen eigenen Platz und Einfluss. Folge diesem Wasserfall und lerne, wie die Gesetze der Kaskade deine Seite in perfekter Harmonie zusammenhalten.

Deine Aufgabe: Folge den Spuren der Kaskade

Kehre die Reihenfolge des style- und link-Tags um:
Was passiert wenn du die Anordnung änderst? Im externen Stylesheet steht für die h1:
h1 {
color: forestgreen;
}
Klassenselektor: Erstelle für die Klasse title eine Regel mit color:orange; Was passiert mit der Regel des Elementselektors, der auch auf die Überschrift angewendet wurde?
ID: Verwende die id title-id für eine deklaration. Färbe die Schrift in tomato ein. Was passiert mit den vorangegangenen Deklarationen?
Inline-Style: Verwende bei der H1 folgendes Attribut: style=“color:blue“. Beobachte dabei was passiert.
!important-Regel: Nutze die !important-Regel und färbe die Überschrift in deiner CSS-Datei folgendermaßen: color: darkolivegreen !important;. Beobachte dabei was passiert.

Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen.

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Der tanzende Wasserfall</title>
    <!--  Step 2 Interne, externe Stylesheets, drehe die Reihenfolge um, schau was passiert Lösche danach beide Regeln für die nächsten Schritte -->
    <style>
        h1 {
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="assets/css/07-cascade.css">
</head>

<body>
    <h1 class="title" id="title-id">Aetheron</h1>
    <!-- Step 4 Inline-Styles-->
    <!--     <h1 class="title"  style="color:blue">Aetheron</h1>  -->
</body>

</html>

CSS

/* Step 3.1 Elementselektor */
h1 {
    color: green
}

/* Step 3.2 Klassenselektor */
/* .title {
    color: orange;
} */

/* Step 3.2 Klassenselektor Reihenfolge */
/* .title {
    color: purple;
} */

/* Step 3.3 ID-Selektor */
/* #title-id {
    color: tomato;
} */

/* Step 5 ID-Selektor */
/* h1 {
    color: darkolivegreen !important;
} */

weiter geht’s