Introduction to em units in CSS

The units em allow you to set the font size as a percentage of the parent size. Let's look at an example.

Let's say we have nested tags like these:

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

Let's set the font size for our div:

div {
	font-size: 20px;
}

And we'll set the paragraph size to 2em. This value corresponds to a font twice the size of the parent's font:

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

Now let's set the paragraph size to 0.5em. This value corresponds to half the parent's font size:

p {
	font-size: 0.5em; /* corresponds to 10px */
}

A value of 1em will make the paragraph font the same as the parent div:

p {
	font-size: 1em; /* corresponds to 20px */
}

Practical tasks

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

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

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

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

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

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

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

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}