Dedovanje lastnosti CSS

Recimo, da imamo odstavek in v njem nekaj besedila v oznaki i:

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

Pobarvajmo odstavke rdeče:

p {
	color: red;
}

Kot rezultat se ne bo pobarvalo le besedilo odstavka, ampak tudi besedilo oznake i:

Bistvo je v tem, da lastnost color deduje. To pomeni, da če ima nadrejena oznaka določeno barvo, bo to barvo imelo tudi podrejeno. Ne dedujejo se vse lastnosti CSS, ampak veliko (tiste, ki jih že poznate - se vse dedujejo).

Po želji pa lahko preglasimo lastnost starša z nastavitvijo selektorja za potomca. Na primer, nastavimo odstavek na rdečo barvo, ležeči tisk (italic) pa na modro:

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

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

Vrstni red selektorjev v kodi CSS v tem primeru nima pomena. Če zamenjamo mesti selektorja i in selektorja p, bo vse delovalo enako:

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

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

Ob preučitvi kode povejte, kakšno barvo bo imelo besedilo v oznaki b:

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

p {
	color: blue;
}

Ob preučitvi kode povejte, kakšno barvo bo imelo besedilo v oznaki b:

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

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

Ob preučitvi kode povejte, kakšno barvo bo imelo besedilo v oznaki b:

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

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

Ob preučitvi kode povejte, kakšno barvo bo imelo besedilo v oznaki li:

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

ul {
	color: blue;
}

Ob preučitvi kode povejte, kakšno barvo bo imelo besedilo v oznaki li:

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

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

Ob preučitvi kode povejte, kakšno barvo bo imelo besedilo v oznaki 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;
}

Ob preučitvi kode povejte, kakšno velikost bo imelo besedilo v oznaki 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;
}