Herança e unidades em no CSS

Suponha que agora tenhamos uma aninhamento mais profundo:

<main>
	<div>
		<p>
			texto
		</p>
	</div>
</main>

Suponha que a tag main tenha o seguinte tamanho de fonte:

main {
	font-size: 10px;
}

Vamos definir o tamanho da fonte para a tag div em em:

div {
	font-size: 2em; /* corresponde a 20px */
}

Também vamos definir o tamanho da fonte do parágrafo em em. Neste caso, ele calculará seu tamanho em relação ao tamanho de fonte já calculado do div:

p {
	font-size: 2em; /* corresponde a 40px */
}

Tarefas Práticas

Suponha que temos um código HTML, para o qual resolveremos tarefas:

<section>
	<div>
		<p>
			texto
		</p>
	</div>
</section>

Determine qual tamanho de fonte em px os divs terão como resultado da execução do seguinte código:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}

Determine qual tamanho de fonte em px os parágrafos terão como resultado da execução do seguinte código:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 1.5em;
}

Determine qual tamanho de fonte em px os parágrafos terão como resultado da execução do seguinte código:

section {
	font-size: 40px;
}
div {
	font-size: 0.5em;
}
p {
	font-size: 0.5em;
}