Inheritance and em units in CSS

Now let's say we have deeper nesting:

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

Let the tag main have the following font size:

cssmain {
  font-size: 10px;
}

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

cssdiv {
  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:

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

Practical tasks

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

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

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

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

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