Learn HTML Learn CSS

CSS tutorial > CSS text indent first line > Text transformation

Text transformation

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p.class1 {
        text-transform: uppercase; 
        text-decoration: overline;
      }
      p.class2 {
        text-transform: lowercase;
        text-decoration: line-through;
      }
      p.class3 {
        text-transform: capitalize;
        text-decoration: underline;
      }
    </style>
  </head>
 
  <body>
    <p class="class1">First paragraph.</p>
    <p class="class2">Second paragraph.</p>
    <p class="class3">The third paragraph.</p>
    <p style="letter-spacing:3px;">The spacing between characters in the text
    has been changed using the letter-spacing property.</p>
  </body>
</html>

Result:

Edit the code listed above and click the "GO" button to view the result.