Inheritance and em units in CSS

Now let's say we have deeper nesting:

<main>
	<div>
		<p>
			text
		</p>
	</div>
</main>

Let the tag main have the following font size:

main {
	font-size: 10px;
}

For the div tag, set the font size to em:

div {
	font-size: 2em; /* corresponds to 20px */
}

We will also set the paragraph font size to em. In this case, it will calculate its size relative to the already calculated div font size:

p {
	font-size: 2em; /* corresponds to 40px */
}

Practical tasks

Let's say we have HTML code for which we will solve problems:

<section>
	<div>
		<p>
			text
		</p>
	</div>
</section>

Determine what font size in px the divs will have as a result of running the following code:

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

Determine what font size in px the paragraphs will be as a result of running the following code:

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

Determine what font size in px the paragraphs will be as a result of running the following code:

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