<div class="container">
  <div class="element">
    <p class="first">
      I have my font variant set to small-caps.
    </p>
    <p class="second">
      I have my font variant set to normal and my <code>text-transform</code> property set to <code>uppercase</code>.
    </p>
    <p class="third">
      I AM ALL UPPERCASED IN THE SOURCE CODE. MY <code>FONT-VARIANT</code> PROPERTY IS SET TO <code>SMALL-CAPS</code>, BUT IT DOES NOT OVERRIDE MY ORIGINAL UPPERCASING.
    </p>
  </div>
</div>
body {
  background-color: #eae6de;
  color: #333;
  font-size: 1.3em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

.element {
  padding: 20px;
  background-color: #fff;
}

.first {
  font-variant: small-caps;
}

.second {
  font-variant: normal;
  text-transform: uppercase;
}

.third {
  font-variant: small-caps;
}