Vererbung in CSS verstehen – damit du dein Layout anpassen kannst

Die Vererbung in CSS ist ein echt charmantes Konzept – wenn du das kennst, kannst du dein Layout easypeasy anpassen!

CSS ist ja die Sprache, die festlegt, was auf einer Webseite welche Farbe, Größe und so weiter hat. Die Abkürzung CSS steht dabei für „Cascading Style Sheets“ – und das Wort „Cascading“ (auf deutsch „kaskadierend“, also quasi „abstufend“) verrät auch schon, worum es hier geht. So, wie bei einem Wasserfall das Wasser von oben nach unten fließt, „fließen“ Styles nämlich von Elternelementen zu ihren Kindern hinunter, sie vererben also ihre Eigenschaften.

Außerdem spielt die Reihenfolge der Anweisungen eine wichtige Rolle: wenn du oben in deinem Code sagst, dass Buttons grün sein sollen, und weiter unten sagst du, dass sie doch lieber blau sein sollen, dann überschreibt die untere Anweisung die obere und du bekommst blaue Buttons.

Es ist mega hilfreich, wenn du die Theorie dahinter einmal verinnerlicht hast – dann kannst du den Code von Themes und Plugins nämlich viel besser nachvollziehen und auch dein eigenes CSS deutlich effizienter und einfacher schreiben.
In der Theorie klingt das jetzt erstmal etwas kompliziert, lass dich davon aber bitte nicht ins Bockshorn jagen. In der Praxis ist es gar nicht so schwer und ich verspreche dir, dass du in ein paar Minuten am Ende des Beitrags bestimmt einen Aha-Moment hattest! 💡

Eltern und Kinder in meinem Code?! – Wer vererbt da denn was?

Die Struktur deiner Seite wird ja durch das HTML festgelegt: hier ist der Inhaltsbereich und da die Sidebar; du bist eine Überschrift und du ein Absatz; das soll eine Verlinkung sein und das da eine Aufzählungsliste. All das steht im HTML-Code.

Dieses HTML ist verschachtelt: ganz außenherum befindet sich der body, der die generelle Seite definiert. Darin existieren verschiedene „Boxen“ für den Kopfbereich, den Inhalt, den Footer und so weiter. Innerhalb dieser Bereiche gibt es wiederum andere Bereiche – beispielsweise einen Artikel, der einen Absatz enthält, in dem wiederum sich ein Link befindet. Das sieht dann so aus:

<article>
    <h1>Ich bin eine Überschrift</h1>
    <p>Ich bin ein normaler Absatz.</p>
    <p>Und ich bin ein Absatz mit einem <a href="#">Link</a>.</p>
</article>

In dieser Verschachtelung sind die Eltern das äußere Element, alles darin die Kinder. Kindelemente können wiederum selber Kinder haben, sind für die also quasi Eltern.

CSS kommt schließlich ins Spiel, um das Ganze hübsch ausschauen zu lassen. Die Vererbung funktioniert dabei im Grunde wie ein Familienstammbaum: Kinder erben bestimmte Eigenschaften von ihren Eltern.
In CSS bedeutet das, dass Kindelemente automatisch bestimmte Styles von ihren Elternelementen übernehmen – ohne dass du diese explizit definieren musst.

Das ist verdammt praktisch! Stell dir vor, du müsstest für jedes einzelne Element auf deiner Webseite die Schriftart neu definieren. Das wäre nicht nur nervig, sondern auch total ineffizient.

Schauen wir uns das mal an einem konkreten Beispiel an:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

Wenn du das in dein CSS schreibst, werden automatisch alle Texte auf deiner Webseite in der Schriftart Arial und in der Farbe #333 (einem dunklen Grau) dargestellt – auch wenn du für Überschriften wie <h1>, Absätze (<p>) oder Links keine spezielle Schriftart definiert hast.

Du könntest jetzt aber hingehen und sagen, dass Überschriften bitte eine andere Farbe haben sollen:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    color: #c00;
}

CSS überschreiben: Wenn Kinder rebellieren

Hier siehst du bereits ein wichtiges Konzept: das Überschreiben. Die Überschrift h1 „rebelliert“ gegen das, was sie von ihrem Elternelement body geerbt hat, und macht ihr eigenes Ding.

• Vererbung: „Ich übernehme automatisch, was meine Eltern haben“
• Überschreiben: „Ich definiere bewusst etwas anderes als meine Eltern“

body { 
    color: blue; 
    font-size: 16px; 
}

p { 
    color: red; /* überschreibt das Blau */
    /* font-size wird weiterhin vererbt */
}

In diesem Beispiel überschreibt der Absatz die Textfarbe, behält aber die Schriftgröße bei.

Neben diesem Überschreiben durch spezifischere Anweisungen ist die Reihenfolge im CSS-Code ganz entscheidend! Was weiter unten steht, überschreibt nämlich das, was weiter oben steht:

p { color: blue; } /* wird überschrieben */
p { color: red; }  /* gewinnt! */

Welche Eigenschaften werden vererbt?

Das Grundprinzip ist also wirklich simpel.

Allerdings werden nicht alle CSS-Eigenschaften vererbt – du wirst gleich sehen, warum das clever ist! Als Faustregel gilt: Eigenschaften, die mit Text zu tun haben, werden meistens vererbt. Eigenschaften für Layout und Aussehen meistens nicht.

Ich habe dir mal einige der gängigsten Anweisungen herausgesucht:

Diese Eigenschaften werden vererbt:

• font-family – welche Schriftart verwendet wird
• font-size – wie groß der Text ist
• font-weight – ob der Text fett, normal oder dünn ist
• font-style – ob der Text beispielsweise schräg gesetzt ist
• color – die Textfarbe
• line-height – der Zeilenabstand
• text-align – Textausrichtung (links, rechts, zentriert)
• letter-spacing – Abstand zwischen Buchstaben
• word-spacing – Abstand zwischen Wörtern

Diese Eigenschaften werden NICHT vererbt:

• background-color, background-image – Hintergrundfarbe und -bilder
• border – Rahmen um Elemente
• margin, padding – Außen- und Innenabstände
• width, height – Breite und Höhe von Elementen
• position – Positionierung von Elementen

Das leuchtet ein, oder? Du willst ja nicht, dass alle Kindelemente plötzlich denselben Rahmen oder Hintergrund haben wie ihr Elternelement.

Die CSS-Hierarchie: wer schlägt wen?

Okay – wir haben also schon mal zwei wichtige Faktoren kennengelernt: die Reihenfolge der Elemente selber im HTML (Eltern / Kind) sowie die Reihenfolge der Anweisungen im CSS (was unten steht, überschreibt).

Jetzt wird es noch ein bisschen komplexer (aber das kriegen wir hin! Versprochen!). Es spielt nämlich auch eine Rolle, wie und wo du deine Anweisungen gibst.

Du kannst die CSS-Anweisungen ja in eine eigene Datei schreiben, die dann beispielsweise style.css heißt. Das ist der saubere Weg. Alternativ dazu kannst du sie einem Element auch direkt im HTML mitteilen. Diese sogenannten Inline-Anweisungen überschreiben dann die allgemeinen.

<p>Ich bin ein Absatz, der alles brav mitmacht...</p>
<p style="font-size: 22px">... und ich bin ein Rebell, der seinen eigenen Kopf hat!</p>

Außerdem können die HTML-Elemente ja auch Klassen und IDs haben. Klassen kannst du beliebig oft verwenden, beispielsweise um zu sagen, dass diverse div-Container alle ein Widget sind. Eine ID hingegen darf es nur einmal pro Seite geben, denn hiermit spezifizierst du ein ganz bestimmtes Element:

<div id="sidebar">
    <div class="widget">....</div>
    <div class="widget">....</div>
    <div class="werbung">...</div>
    <div class="widget">....</div>
    <div class="werbung">...</div>
</div>

Du kannst im CSS also entweder alle divs auf einmal definieren (was bei divs nicht sonderlich sinnvoll ist) oder aber Klassen und IDs gezielt ansprechen. IDs haben eine Raute vor ihrem Namen, Klassen einen Punkt.

/* nur die Breite der Sidebar festlegen und ihre Hintergrundfarbe */
#sidebar {
   width: 200px;
   background: #fff;
}

/* alle Widgets haben einen hellgrauen Hintergrund und 20px Außenabstand */
.widget {
   background: #fcfcfc;
   margin: 20px;
}

/* um alle Werbeboxen ist ein roter Rahmen */
.werbung {
   border: 2px solid #c00;
}

Kommen wir zurück zur Vererbung – hier haben generelle Selektoren (wie h1 {...}) weniger Gewicht als Klassen (.widget {...}) und die wiederum weniger als IDs (#sidebar {...}).

Die Hackordnung im Detail

1. Inline-Styles (direkt im HTML: <p style="color: red;">)
2. IDs (#sidebar)
3. Klassen (.widget), Attribute und Pseudo-Klassen (wenn dir das noch nix sagt, kannst du das an dieser Stelle ignorieren)
4. Element-Selektoren (h1, p, div)
5. Vererbte Eigenschaften

Aber Achtung: Es wird noch lustiger! 😅 CSS rechnet nämlich mit Spezifitäts-Punkten:

• Inline-Style = 1000 Punkte
• ID = 100 Punkte
• Klasse = 10 Punkte
• Element = 1 Punkt

Keine Sorge, die Punktzahlen musst du nicht auswendig lernen. Es geht nur einmal ums Prinzip dahinter – du wirst gleich sehen, warum das in der Praxis gar keine so große Rolle spielt.

Im CSS kannst du die Selektoren ja schachteln und kombinieren. Statt nur p {...} für alle Absätze kannst du mit .artikel p {...} nur die Absätze innerhalb von Artikeln ansprechen. Theoretisch kannst du beliebig viele IDs, Klassen und Selektoren hintereinander schreiben, um ein ganz bestimmtes Element zu erwischen (Spoiler: machst du nicht! Warum, siehst du gleich).
Dadurch entsteht natürlich ein gewisser „Konkurrenzkampf“ – wir haben ja gerade gesagt, dass die weiter unten stehenden Anweisungen die von weiter oben überschreiben. Aber was, wenn oben eine ID angesprochen wird (100 Punkte – bämm!) und weiter unten nur ein paar popelige Klassen?! – Es kommt dann darauf an, was wie viele Punkte ergibt.

Schauen wir uns mal diese Beispiele an:

/* 1 Punkt */
p { color: blue; }

/* 10 Punkte */
.artikel { color: green; }

/* 11 Punkte (10 + 1) */
.artikel p { color: red; }

/* 20 Punkte (10 + 10) */
.artikel .text { color: purple; }

/* 110 Punkte (100 + 10) */
#content .artikel { color: orange; }

Der Selektor mit den meisten Punkten gewinnt! Das bedeutet: #content .artikel schlägt .artikel p, obwohl beide auf dasselbe Element zielen könnten. Wenn du oben eine ID ansprichst und weiter unten „nur“ die Klasse, gewinnt die ID.

Ehrlich gesagt, musst du dir das mit der Berechnung in der Praxis nicht merken. Es ist nur wichtig, dass du das Prinzip einmal verstanden hast und weißt, wieso manche Anweisungen mehr Gewicht haben als andere.

Warum sauberes CSS so wichtig ist

Du siehst also, dass es verschiedene Wege gibt, um dein HTML zu stylen bzw. um die einzelnen Elemente im CSS anzusprechen. Spielt es eine Rolle, welche Variante du wählst?! – Japs!

Denn: je spezifischer dein CSS, desto schwerer wird es, später Änderungen zu machen.

Stell dir vor, du schreibst sowas:

#header .navigation ul li a.button.primary {
    background-color: blue;
}

Das sind 131 Punkte! Wenn du später die Farbe für diesen armen Button ändern willst, brauchst du einen noch spezifischeren Selektor oder musst zu drastischen Mitteln greifen. Damit wird dein Code super chaotisch und schwer zu lesen und ich verspreche dir, du wirst ohne Ende fluchen. 🤯

Besser wäre:

.primary-button {
    background-color: blue;
}

Kurz und schmerzlos! Das lässt dir alle Flexibilität für spätere Anpassungen. Du kannst es problemlos überschreiben mit:

.special-page .primary-button {
    background-color: green; 
}

!important: Die Bratpfanne des CSS

Und dann gibt es noch !important – das ist wie eine Bratpfanne, die du deinem Code mit Schmackes überbrätst. 😅 Es überschreibt alles:

.my-button {
    background-color: red !important;
}

Warum !important problematisch ist

!important hat quasi unendlich viele Spezifitäts-Punkte. Das bedeutet:

❌ Du kannst es nur mit anderem !important überschreiben
❌ Es macht dein CSS unflexibel
❌ Es ist ein Zeichen für schlecht strukturiertes CSS
❌ Es frustriert andere Entwickler (und dich selbst in 6 Monaten)

/* Schlecht: */
.button { background: blue !important; }

/* Später willst du es ändern: */
.special-button { background: green; } /* Funktioniert NICHT! */
.special-button { background: green !important; } /* Jetzt wird's zum Chaos */

Wann !important okay ist

Es gibt nur wenige Ausnahmen, wo !important gerechtfertigt ist:

• Beim Überschreiben von Plugin-CSS, das selbst !important benutzt
• In Utility-Klassen, die wirklich immer funktionieren sollen (wie .hidden { display: none !important; })

Praxis: CSS bei WordPress-Themes überschreiben

Wie schaut das jetzt konkret bei WordPress aus?
Wo du das CSS da überhaupt eingibst, erkläre ich dir in diesem Artikel:

Moderne WordPress-Themes: Weniger Custom CSS nötig?

Du denkst dir jetzt vielleicht: „Moment mal, mein WordPress-Theme hat doch einen Customizer mit Farbauswahl und Schriftoptionen!“ Oder du nutzt sogar ein modernes Block-Theme mit Full Site Editing, wo du fast alles visuell anpassen kannst. Brauchst du dann überhaupt noch Custom CSS?

Die ehrliche Antwort: Meistens nicht! Moderne Themes decken etwa 80-90% der üblichen Anpassungswünsche ab:

✅ Farben ändern → Customizer/Theme-Einstellungen
✅ Schriftarten wechseln → Customizer/Global Styles
✅ Abstände anpassen → Block-Editor/Spacing-Optionen
✅ Layout ändern → Block-Patterns/Template-Editor

Aber Custom CSS brauchst du trotzdem noch für:

❌ Sehr spezifische Anpassungen (Hover-Effekte, Animationen)
❌ Plugin-Styles überschreiben (Contact Form 7, WooCommerce etc.)
❌ Responsives Feintuning (bestimmte mobile Anpassungen)
❌ Theme-Bugs fixen (wenn das Theme etwas vergessen hat)
❌ spezielle Design-Wünsche (die nicht in den Standard-Optionen verfügbar sind)

Im Alltag sind das meistens zwei Anwendungsfälle: irgendetwas ist noch gar nicht gestylt, oder aber du möchtest es anders stylen.

Wenn dein Theme vergessen hat, irgendeine Eigenschaft zu definieren, ist das gar kein Problem. Du ergänzt einfach deinen Code:

/* Im Custom CSS oder Child Theme */
.widget-title {
    font-weight: bold; /* War im Theme nicht definiert */
}

Spannender wird es, wenn dein Theme etwas definiert, das dir nicht gefällt:

/* Theme-CSS */
.post-title { 
    color: #333; 
    font-size: 24px; 
}

Du willst es aber ändern:

/* Dein eigenes CSS */
.post-title { 
    color: red; 
    font-size: 28px; 
}

Aber: Was, wenn das Theme spezifischer ist und deine Änderungen nüscht bewirken?

/* Theme CSS */
.content .post-title { color: #333; } /* 11 Punkte */

/* Dein CSS */
.post-title { color: red; } /* 10 Punkte - VERLIERT! */

Der Browser Inspector ist dein Freund und Helfer

Wenn dein Code keine Auswirkungen hat, sind die Anweisungen vom Theme oder einzelnen Plugins stärker. Kein Problem – wir schauen einfach nach, wie genau deren CSS aussieht, und schon wissen wir, wie wir es überschreiben können!

Dazu nutzen wir den Browser Inspector. Damit guckst du quasi unter die Haube einer Webseite und siehst ihren Code, also auch das HTML und CSS.

1. Rechtsklick auf das Element → „Element untersuchen“ / „Inspect“ (je nach Browser heißt das etwas anders)
2. Im Styles-Panel siehst du alle CSS-Regeln, die auf dieses Element einwirken
3. Durchgestrichene Regeln wurden überschrieben
4. Die oberste Regel gewinnt

Schau dir die gewinnende Regel an und pass deinen Code entsprechend an. Da dein eigenes CSS nach dem Theme-CSS geladen wird, überschreibt es das also in der Regel. Ausnahmefälle sind, wie gesagt, unschön gestylte Plugins mit Inline-CSS – da musst du dann schon mal zu !important greifen, wenn es gar nicht anders geht.

/* Theme hat: */
.sidebar .widget-title { color: blue; }

/* Du brauchst mindestens: */
.sidebar .widget-title { color: red; } /* Gleiche Spezifität, aber später im Code */
/* Oder: */
.sidebar .widget .widget-title { color: red; } /* Höhere Spezifität */

Warum ist das wichtig für deinen Blog?

Oookay – du hast es geschafft, wir sind fast am Ende des Artikels angekommen! 🙌

Falls du jetzt dezent erschlagen bist, fragst du dich vielleicht, ob du das überhaupt alles wissen musst, wenn du dich als Blogger doch eigentlich aufs Schreiben konzentrierst und kein Webdesigner bist. Ich finde: ja, du solltest von CSS zumindest grundlegend Ahnung haben! Und dazu gehört auch das Ding mit der Vererbung.

Das ist so wie beim Autofahren: als Autofahrer musst du kein KFZ-Mechaniker sein. Aber du solltest wissen, was dieses orange Lämpchen im Cockpit bedeutet, wo du Öl nachfüllst und warum es echt doof wird für den Motor, wenn du das ignorierst oder statt Öl einfach Kühlflüssigkeit reinkippst. 🤓

Der Trend bei WordPress (und anderen Blogsystemen) geht ganz klar hin zu mehr Benutzerfreundlichkeit für Otto Normalverbraucher, sodass du viele Einstellungen an deinem Layout über Schieberegler & Co. vornehmen kannst. Dennoch wirst du früher oder später immer mal wieder an den Punkt kommen, an dem das nicht ausreicht. Dann ist es wirklich clever, wenn du das CSS zu bändigen weißt! 😊

---

Hast du schon mal bewusst mit der Vererbung im CSS gearbeitet oder bist du eher überrascht, was da so alles übernommen wird (oder auch nicht)? Erzähl gerne in den Kommentaren von deinen Erfahrungen – und natürlich kannst du auch deine Fragen stellen!