Dziedziczenie właściwości CSS

Załóżmy, że mamy akapit, a w nim jakiś tekst w tagu i:

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

Pokolorujmy akapity na czerwono:

p {
	color: red;
}

W rezultacie pokoloruje się nie tylko tekst akapitu, ale także tekst tagu i:

Chodzi o to, że właściwość color jest dziedziczona. Oznacza to, że jeśli tagowi nadrzędnemu przypisano jakiś kolor, to taki kolor będzie miał również tag potomny. Nie wszystkie właściwości CSS są dziedziczone, ale wiele (z tych, które już znasz - wszystkie są dziedziczone).

W razie potrzeby można jednak nadpisać właściwość rodzica, ustawiając selektor potomka. Na przykład, ustawmy akapitowi kolor czerwony, a kursywie - niebieski:

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

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

Kolejność selektorów w kodzie CSS w takim przypadku nie ma znaczenia. Jeśli zamienimy miejscami selektor i i selektor p, wszystko będzie działać tak samo:

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

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

Po przestudiowaniu kodu powiedz, jaki kolor będzie miał tekst w tagu b:

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

p {
	color: blue;
}

Po przestudiowaniu kodu powiedz, jaki kolor będzie miał tekst w tagu b:

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

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

Po przestudiowaniu kodu powiedz, jaki kolor będzie miał tekst w tagu b:

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

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

Po przestudiowaniu kodu powiedz, jaki kolor będzie miał tekst w tagu li:

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

ul {
	color: blue;
}

Po przestudiowaniu kodu powiedz, jaki kolor będzie miał tekst w tagu li:

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

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

Po przestudiowaniu kodu powiedz, jaki kolor będzie miał tekst w 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 przestudiowaniu kodu powiedz, jaki rozmiar będzie miał tekst w 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;
}