<div class="container">
  <p>The body font size is set to 18px... <span class="smaller">My font size is <code>smaller</code> than my parent's</span>.</p>
  <h1>My font size is set to <code>x-large</code></h1>
  <div class="element">
    <p>I have a font-size set to 150%. This means that my font size is 1.5 times bigger than the font size of my parent = 27px.</p>
    <div class="child">
      My font size is set to 0.7em. This means that my font size is computed relative to my parent's font size. My computed font size is: 0.7*27px = 18.9px.
    </div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 18px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  font-size: 150%;
}

.child {
  font-size: .7em;
}

h1 {
  font-size: x-large;
}

span.smaller {
  font-size: smaller;
}