Wenn du anfängst, Webseiten zu bauen, stolperst du früher oder später über den Begriff Vererbung. Klingt erst einmal nach Familienrecht oder Erbschaft, ist aber ein unverzichtbares Thema in CSS. Durch die Vererbung ist es möglich, verschiedene CSS-Eigenschaften wie Farben, Schriftart und Schriftgröße einmalig zu definieren. Das erspart das Definieren eines jeden Elementes. Wie die Vererbung in CSS genau funktioniert, das erkläre ich in diesem Blogartikel.
Vererbung in CSS: HTML wie ein Familienstammbaum
HTML besteht aus verschachtelten Elementen. Ein <body> enthält zum Beispiel ein <main>, darin steckt ein <article>, darin eine <section> und schließlich ein <p> mit Text.
Das sieht ungefähr so aus:
<body>
<main>
<article>
<p>Hallo Welt!</p>
</article>
</main>
</body>Jedes Element hat sozusagen einen Elternteil und eventuell Kinder. Das <body> ist der Elternteil von <main>, <main> wiederum der Elternteil von <article> und so weiter.
Genau hier kommt die Vererbung ins Spiel.
CSS kann Eigenschaften an die Kinder weitergeben
Nehmen wir an, du schreibst dieses CSS:
body {
color: #333;
font-family: Arial, sans-serif;
}Du hast die Schriftfarbe und die Schriftart nur für das <body> festgelegt.
Jetzt kommt der interessante Teil:
Der Absatz <p> bekommt diese Eigenschaften automatisch mit. Du musst also nicht jedem einzelnen Absatz dieselbe Schriftart oder Farbe zuweisen.
Das ist Vererbung.
Der Browser denkt sich praktisch:
Wenn der Vater Arial verwendet und nichts anderes angegeben wurde, dann benutzen die Kinder eben auch Arial.
Warum ist das praktisch?
Stell dir vor, deine Website hat 500 Absätze.
Ohne Vererbung müsstest du schreiben:
p {
font-family: Arial;
}Und für Listen:
li {
font-family: Arial;
}Und für Überschriften:
h2 {
font-family: Arial;
}Und so weiter.
Mit Vererbung reicht oft eine einzige Regel:
body {
font-family: Arial, sans-serif;
}Fertig.
Das spart unglaublich viel Arbeit.
Aber nicht alles wird vererbt
Jetzt kommt der Haken.
Viele Einsteiger glauben, jede CSS-Eigenschaft würde automatisch weitergegeben.
Das stimmt nicht.
Zum Beispiel:
body {
border: 2px solid red;
}Der Absatz bekommt keinen roten Rahmen.
Oder:
body {
margin: 20px;
}Auch den Außenabstand erbt kein anderes Element.
Warum?
Weil es keinen Sinn ergeben würde.
Stell dir vor, jedes Element würde automatisch einen Rahmen oder einen Abstand erhalten. Das Layout wäre nach wenigen Sekunden ein einziges Chaos.
Was wird normalerweise vererbt?
Vor allem Eigenschaften, die den Text betreffen.
Dazu gehören beispielsweise:
colorfont-familyfont-sizefont-weightfont-styleline-heightletter-spacingtext-alignvisibility
Diese Eigenschaften machen auf untergeordneten Elementen meistens ebenfalls Sinn.
Und was wird normalerweise nicht vererbt?
Viele Eigenschaften, die das Layout betreffen, bleiben beim jeweiligen Element.
Zum Beispiel:
marginpaddingborderbackgroundwidthheightdisplaypositionflexgrid
Diese Eigenschaften musst du meist direkt für das jeweilige Element festlegen.
Man kann Vererbung auch erzwingen
Manchmal möchtest du trotzdem eine Eigenschaft übernehmen.
Dafür gibt es den Wert inherit.
Beispiel:
button {
color: inherit;
}Jetzt übernimmt der Button die Textfarbe seines Elternelements.
Dasselbe funktioniert auch bei vielen anderen Eigenschaften.
Oder bewusst zurücksetzen
CSS kennt außerdem einige praktische Schlüsselwörter.
color: inherit;Übernimmt den Wert des Elternteils.
color: initial;Setzt die Eigenschaft auf den Standardwert des Browsers zurück.
color: unset;Verhält sich abhängig davon, ob die Eigenschaft normalerweise vererbt wird oder nicht.
Diese Werte brauchst du nicht täglich, aber irgendwann wirst du froh sein, dass es sie gibt.
Ein kleines Praxisbeispiel
Schauen wir uns einmal dieses HTML an:
<body>
<div class="box">
<h1>Willkommen</h1>
<p>Das ist ein Absatz.</p>
</div>
</body>Und dazu dieses CSS:
body {
font-family: Verdana, sans-serif;
color: darkblue;
}
.box {
background: #f5f5f5;
padding: 20px;
}Das Ergebnis:
- Die Überschrift wird in Verdana angezeigt.
- Der Absatz ebenfalls.
- Beide erhalten die dunkelblaue Schriftfarbe.
- Den grauen Hintergrund bekommt aber nur die Box.
- Auch das Padding bleibt ausschließlich bei der Box.
Genau so arbeitet die Vererbung in CSS.
Mein Tipp für den Alltag
Gerade am Anfang solltest du möglichst viele globale Texteigenschaften direkt im <body> definieren.
Zum Beispiel:
body {
font-family: system-ui, sans-serif;
font-size: 18px;
line-height: 1.6;
color: #222;
}Damit sieht deine komplette Website sofort einheitlich aus. Später kannst du einzelne Bereiche gezielt überschreiben, wenn du eine Ausnahme brauchst.
Vererbung in CSS – Fazit
Die Vererbung gehört zu den Dingen, die CSS so angenehm machen. Anstatt dieselben Eigenschaften immer wieder neu zu definieren, gibst du sie einmal an einem übergeordneten Element an und der Browser verteilt sie automatisch an die passenden Kind-Elemente. Wichtig ist nur zu wissen, dass längst nicht jede Eigenschaft vererbt wird. Texteigenschaften werden häufig weitergegeben, Layout-Eigenschaften dagegen fast nie. Wenn du dieses Prinzip einmal verstanden hast, wird dein CSS nicht nur kürzer und sauberer, sondern auch deutlich einfacher zu pflegen.
- KI-Müdigkeit statt Produktivität: Viele Beschäftigte wünschen sich die Arbeitswelt vor ChatGPT zurück – 29. Juli 2026
- Google setzt auf KI: Studie zeigt tiefgreifenden Wandel des Suchverhaltens – 28. Juli 2026
- Vererbung in CSS: Warum sich manche Eigenschaften ganz von allein weitergeben – 27. Juli 2026
Schreiben Sie einen Kommentar