<div class="container">
  <p>The spacing between the individual letters is <em>increased</em> by <code>1em</code>. When you hover over the text container, the spacing will transition back to its normal default value. <code>letter-spacing</code> is transitionable so the spacing will change smoothly if you define a <code>transition</code></p>
  <div class="parent">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
    </p>
    <h4>This title would normally inherit same transformation as its parent. Instead, the <code>text-transform</code> property has been explicitly set on it to a value <code>capitalize</code>, which will capitalize the first letter of every word.</h4>
    <div class="child">
      This child element inherits the same text transformation as its parent (all-capital letters) since the <code>text-transform</code> property cascades, but the value has been explicitly set on this element to <code>lowercase</code>, which will override the value inherited from the parent.
    </div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  line-height: 1.5;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

.parent {
  background-color: #0099cc;
  color: white;
  padding: 1em;
  text-transform: uppercase;
}

.child {
  background-color: #eee;
  color: #333;
  padding: 1em;
  text-transform: lowercase;
}

h4 {
  text-transform: capitalize;
}