Quiz: Wer hat das letzte Wort? – CSS Kaskade & Spezifität

01. body vs. p

<h1>Überschrift</h1>
<p>Absatz</p>

body {
    color: red;
}

p {
    color: blue;
}

Welche Aussagen stimmen? Die Überschrift ist rot. Der Absatz ist blau. Beide Texte sind blau.

body { color: red } wird vererbt – aber die direkte Regel für p gewinnt gegen Vererbung.

02. gleicher Selektor

p {
    color: red;
}

p {
    color: blue;
}

Welche Farbe hat der Absatz? Rot Blau Beide Farben gleichzeitig

Zwei gleich starke Regeln für dieselbe Eigenschaft – die spätere gewinnt.

03. zwei CSS-Dateien

<link href="red.css" rel="stylesheet">
<link href="blue.css" rel="stylesheet">

/* red.css */
p { color: red; }

/* blue.css */
p { color: blue; }

Welche Datei hat das letzte Wort? red.css blue.css Keine – mehrere CSS-Dateien sind ungültig.

Die zweite Datei wird später geladen. Bei gleich starken Regeln gewinnt die spätere.

04. zwei CSS-Dateien, umgekehrt

<link href="blue.css" rel="stylesheet">
<link href="red.css" rel="stylesheet">

/* blue.css */
p { color: blue; }

/* red.css */
p { color: red; }

Welche Farbe hat der Absatz? Rot Blau Die erste Datei gewinnt immer.

Die Reihenfolge im HTML entscheidet – red.css kommt zuletzt.

05. style vor link

<style>
  p { color: red; }
</style>

<link href="style.css" rel="stylesheet">

/* style.css */
p { color: blue; }

Was gewinnt? Internes CSS gewinnt immer. Externes CSS gewinnt hier, weil es später kommt. Beides ist ungültig.

Intern oder extern ist nicht entscheidend – die Reihenfolge im Dokument zählt.

06. link vor style

<link href="style.css" rel="stylesheet">

<style>
  p { color: red; }
</style>

/* style.css */
p { color: blue; }

Welche Farbe hat der Absatz? Rot Blau Externes CSS gewinnt immer.

Das <style> steht später im Dokument – deshalb hat internes CSS hier das letzte Wort.

07. body, main, p

<main>
    <h1>Überschrift</h1>
    <p>Absatz</p>
</main>

body { color: red;   }
main { color: blue;  }
p    { color: green; }

Welche Aussagen stimmen? Die Überschrift ist blau. Der Absatz ist grün. Alles ist rot, weil body oben steht.

main vererbt blau an die Überschrift. Der Absatz bekommt direkt grün – direkte Regeln schlagen Vererbung.

08. Klasse gegen Element

<p class="intro">Absatz</p>

p {
    color: red;
}

.intro {
    color: blue;
}

Welche Farbe hat der Absatz? Rot Blau Keine – man darf p und class nicht mischen.

Eine Klasse ist spezifischer als ein Elementselektor – Reihenfolge spielt hier keine Rolle mehr.

09. vererbbar oder nicht?

body {
    color: red;
    margin: 20px;
    font-size: 1.2rem;
    background: yellow;
}

Welche Eigenschaften werden an Kindelemente vererbt? color margin font-size background

Schrift- und Texteigenschaften wie color und font-size werden vererbt. Box-Eigenschaften wie margin und background nicht – sonst würde jedes Kindelement denselben Abstand und Hintergrund erben.

10. ID gegen Klasse gegen Element

<p id="special" class="intro">Absatz</p>

p        { color: blue;  }
.intro   { color: red;   }
#special { color: green; }

Welche Farbe hat der Absatz? Blau – p steht zuerst. Rot – .intro ist spezifischer als p. Grün – #special ist am spezifischsten.

Spezifität schlägt Reihenfolge: ID (#special) > Klasse (.intro) > Element (p). Die Reihenfolge im CSS spielt hier keine Rolle.

11. !important

p { color: blue !important; }
p { color: red; }

Welche Farbe hat der Absatz? Blau – wegen !important. Rot – die spätere Regel gewinnt. Keine – !important ist ungültig.

!important überschreibt Reihenfolge und Spezifität. Die erste Regel gewinnt, obwohl sie früher steht. Achtung: !important sollte man vermeiden – es macht CSS schwer wartbar.

QUIZ – Wer hat das letzte Wort?