Arv af CSS egenskaber

Lad os sige, at vi har et afsnit, og i det er der noget tekst i tagget i:

<p>
	Dette er noget <i>tekst</i> i et afsnit.
</p>

Lad os farve afsnittene i rød:

p {
	color: red;
}

Som et resultat vil ikke kun afsnittets tekst blive farvet, men også teksten i tagget i:

Hele pointen er, at egenskaben color arves. Det betyder, at hvis en forældretag har en bestemt farve, så vil dens afkom også have denne farve. Ikke alle CSS-egenskaber arves, men mange gør (af dem, du allerede kender - arves alle).

Ved ønske kan man dog tilsidesætte forælderens egenskab ved at angive en selektor for afkommet. For eksempel, lad os give afsnittet rød farve og kursiv - blå:

<p>
	Dette er noget <i>tekst</i> i et afsnit.
</p>

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

Rækkefølgen af selektorer i CSS-koden har i dette tilfælde ikke nogen betydning. Hvis man ombytter selektoren i og selektoren p, vil det fungere på samme måde:

<p>
	Dette er noget <i>tekst</i> i et afsnit.
</p>

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

Efter at have studeret koden, sig hvilken farve teksten i tagget b vil have:

<p>
	Dette er noget <b>tekst</b> i et afsnit.
</p>

p {
	color: blue;
}

Efter at have studeret koden, sig hvilken farve teksten i tagget b vil have:

<p>
	Dette er noget <b>tekst</b> i et afsnit.
</p>

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

Efter at have studeret koden, sig hvilken farve teksten i tagget b vil have:

<p>
	Dette er noget <b>tekst</b> i et afsnit.
</p>

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

Efter at have studeret koden, sig hvilken farve teksten i tagget li vil have:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

ul {
	color: blue;
}

Efter at have studeret koden, sig hvilken farve teksten i tagget li vil have:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

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

Efter at have studeret koden, sig hvilken farve teksten i tagget i vil have:

<ul>
	<li>tekst <i>kursiv</i> tekst</li>
	<li>tekst <i>kursiv</i> tekst</li>
	<li>tekst <i>kursiv</i> tekst</li>
</ul>

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

Efter at have studeret koden, sig hvilken størrelse teksten i tagget i vil have:

<ul>
	<li>tekst <i>kursiv</i> tekst</li>
	<li>tekst <i>kursiv</i> tekst</li>
	<li>tekst <i>kursiv</i> tekst</li>
</ul>

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