Dědičnost

Některé vlastnosti se z prvku předávají jeho potomkům. Říká se tomu dědičnost. Když nastavíte barvu textu nějakému prvku, dostane ji všechen text uvnitř něj, tedy i text jeho dětí, vnoučat a tak dále, pokud jim vlastní barvu nenastavuje jiné pravidlo.

#plemena {
	color: purple;
}

S tímto pravidlem by byly položky seznamu fialové, protože barvu zdědí od #plemena. Nadpis v něm by ale zůstal olivově zelený, protože mu vlastní barvu nastavuje pravidlo pro h2, a vlastní pravidlo prvku vždy vyhraje nad zděděnou hodnotou.

Dědí se hlavně vlastnosti textu: color, font-family a další vlastnosti začínající na font-, text-align nebo text-transform. Proto je hlavní nadpis zarovnaný na střed: vlastnost text-align jste nastavili prvku div a h1 ji zdědil.

Nedědí se vlastnosti boxu prvku, tedy obdélníku, který prvek na stránce zabírá: border, background-color a také rozměry a mezery, které poznáte v lekci CSS box model. Prvek div s id plemena má rámeček, ale nadpis a seznam uvnitř něj ho nemají. Odstavce ve skupinách sice vypadají, jako by měly béžové pozadí také, ale nemají: jejich pozadí je průhledné, takže jím prosvítá pozadí skupiny.

Dědičnost ušetří spoustu práce. Proto se barva textu a písmo celé stránky obvykle nastavují prvku body a všechny prvky na stránce je zdědí.