Dedenie CSS vlastností

Majme odsek, a v ňom nejaký text v tagu i:

<p>
	This is some <i>text</i> in paragraph.
</p>

Nastavme odsekom červenú farbu:

p {
	color: red;
}

V dôsledku sa zafarbí nielen text odseku, ale aj text tagu i:

Celé je to o tom, že vlastnosť color sa dedí. To znamená, že ak rodičovskému tagu je nastavená nejaká farba, takúto farbu budú mať aj jeho potomkovia. Nie všetky CSS vlastnosti sa dedia, ale mnohé áno (z tých, ktoré už poznáte - všetky sa dedia).

V prípade potreby však možno prepísať vlastnosť rodiča nastavením selektoru potomka. Napríklad, nastavme odseku červenú farbu a kurzíve modrú:

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

Poradie selektorov v CSS kóde v takom prípade nemá význam. Ak prehodíme miestami selektor i a selektor p, všetko bude fungovať rovnako:

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

Po preštudovaní kodu povedzte, akú farbu bude mať text v tagu b:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

Po preštudovaní kodu povedzte, akú farbu bude mať text v tagu b:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

Po preštudovaní kodu povedzte, akú farbu bude mať text v tagu b:

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

Po preštudovaní kodu povedzte, akú farbu bude mať text v tagu li:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

Po preštudovaní kodu povedzte, akú farbu bude mať text v tagu li:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

Po preštudovaní kodu povedzte, akú farbu bude mať text v tagu i:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}
i {
	color: green;
}

Po preštudovaní kodu povedzte, akú veľkosť bude mať text v tagu i:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}