CSS omaduste pärimine

Oletagem, et meil on lõik ja selles mingi tekst siltides i:

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

Värvime lõigud punaseks:

p {
	color: red;
}

Tulemusena värvub mitte ainult lõigu tekst, vaid ka sildi i tekst:

Kõik on selles, et omadus color pärandub. See tähendab, et kui vanemsildil on määratud mingi värv, siis see värv on ka järglastel. Kõik CSS omadused ei pärine, aga paljud (nendest, mida te juba teate - kõik pärivad).

Soovi korral on võimalik siiski vanema omadust üle kirjutada, määrates järglase valija. Näiteks määrame lõigule punase värvi ja kaldkirjale sinise:

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

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

Valijate järjekord CSS koodis sel juhul ei oma tähtsust. Kui vahetada omavahel valija i ja valija p, töötab kõik samamoodi:

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

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

Pärast koodi uurimist, öelge mis värvi on tekst sildis b:

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

p {
	color: blue;
}

Pärast koodi uurimist, öelge mis värvi on tekst sildis b:

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

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

Pärast koodi uurimist, öelge mis värvi on tekst sildis b:

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

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

Pärast koodi uurimist, öelge mis värvi on tekst sildis li:

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

ul {
	color: blue;
}

Pärast koodi uurimist, öelge mis värvi on tekst sildis li:

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

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

Pärast koodi uurimist, öelge mis värvi on tekst sildis 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;
}

Pärast koodi uurimist, öelge mis suuruse on tekst sildis 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;
}