<div id="parent" class="parent">
  Parent      </div>

    <div id="outerChild" class="child">
      Outer child      </div>

      <div id="innerChild" class="child">
        Inner child
    </div>

/* PARENT SIZE*/

.parent {
  font-size: 20px;
}


/* CHILD SIZE, MULTIPLIER*/

.child {
  font-size: 1.75em;
  line-height: 2em;
}


/* BACKGROUND COLORS, LINE HEIGHT*/
#parent {
  background-color: #a8c9ff;
}

#outerChild {
  background-color: #70a6ff;
}

#innerChild {
  background-color: #3d86ff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.