<!DOCTYPE html>
<html>

<head>
  <title>CSS Example</title>
  <style>
    body {
        color:#000000;
        background-color:#ffffff;
        font-family:arial, verdana, sans-serif; 
        font-size:12px;}

    p.none       {text-transform:none;}
    p.capitalize {text-transform:capitalize;}
    p.uppercase  {text-transform:uppercase;}
    p.lowercase  {text-transform:lowercase;}

    p.smallcaps {font-variant:small-caps;}
  </style>
</head>

<body>
<h1>text-transform and font-variant properties</h1>
<p class="none">      No text tranformation</p>
<p class="capitalize">Text has been <b>capitalized</b> </p>
<p class="uppercase"> Text has all been <b>upper cased</b> </p>
<p class="lowercase"> Text has all been <b>lower cased</b> </p>
<p class="smallcaps"> Text has all been <b>small capped</b> </p>
</body>
</html>