Vererbung

Manche Eigenschaften werden von einem Element an seine Nachfahren weitergegeben. Das nennt man Vererbung. Legst du die Textfarbe eines Elements fest, bekommt aller Text darin diese Farbe, auch der Text seiner Kinder, Enkel und so weiter, solange keine Regel ihnen eine eigene Farbe gibt.

#rassen {
	color: purple;
}

Mit dieser Regel wären die Listeneinträge lila, weil sie die Farbe von #rassen erben. Die Überschrift darin bliebe olivgrün, weil die Regel für h2 ihr eine eigene Farbe gibt, und die eigene Regel eines Elements gewinnt immer gegen einen geerbten Wert.

Meist werden die Eigenschaften von Text vererbt: color, font-family und die anderen Eigenschaften, die mit font- beginnen, text-align oder text-transform. Deshalb ist die Hauptüberschrift zentriert: Du hast text-align für das div gesetzt, und das h1 hat es geerbt.

Die Eigenschaften der Box eines Elements, des Rechtecks, das das Element auf der Seite einnimmt, werden nicht vererbt: border, background-color und auch die Größen und Abstände, die du in der Lektion CSS-Box-Modell kennenlernst. Das div mit der ID rassen hat einen Rahmen, die Überschrift und die Liste darin aber nicht. Die Absätze in den Gruppen sehen aus, als hätten sie auch einen beigen Hintergrund, aber das stimmt nicht: Ihr Hintergrund ist transparent, sodass der Hintergrund der Gruppe durchscheint.

Vererbung spart viel Arbeit. Deshalb legt man die Textfarbe und die Schrift einer ganzen Seite meist für body fest, und alle Elemente der Seite erben sie.