<div class="container">
  <h2>I am a heading. My color has been set to blue. All occurances of a heading like me will have the same color, except those that are found inside the following blue box.</h2>
  <div class="text">
    <h2>I am a heading similar to the ones outside my container, but my color has been reset using <code>initial</code>.</h2>
    I have my text color set to white. My text color will cascade to all my descendants, unless one of them resets its color, or overrides the color with a color of their own.
    <div class="child">
      Normally I would inherit the white color from my parent, but I have my text color reset to its initial value (which is normally black).
    </div>
    <div class="another-child">
      I am a child of my parent, but I kept the same text color as my parent. My sibling (the one above me) chose to reset its color, but I didn't.
    </div>
  </div>
  <h2>I am another heading. I have the same blue color.</h2>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.text {
  padding: 20px;
  background-color: #0099cc;
  color: white;
}

.child {
  color: initial;
  padding: 20px;
}

h2 {
  color: #0099cc;
}

.text h2 {
  color: initial;
}

.another-child {
  padding: 20px;
}