<div id="parent">
  <p>親要素</p>
  <div id="child">
    <p>子要素</p>
    <div id="grandchild">
      <p>孫要素</p>
    </div>
  </div>
</div>
#parent {
  font-size: 10px;
}
#child {
  font-size: 2em;
  /*
      #parentの10px = 1em
      2em = 20px
    */
}
#grandchild {
  font-size: 1.5em;
  /*
      #childの20px = 1em
      1.5em = 30px
    */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.