CSS text-transform

The CSS text-transform property is used to transform the text to uppercase, lowercase, or capitalize the first letter of each word. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{text-transform: uppercase;}
      .b{text-transform: lowercase;}
      .c{text-transform: capitalize;}
   </style>
</head>
<body>

   <h2>text-transform: uppercase</h2>
   <p class="a">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>

   <h2>text-transform: lowercase</h2>
   <p class="b">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
   
   <h2>text-transform: capitalize</h2>
   <p class="c">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   
</body>
</html>

Output

text-transform: uppercase

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

text-transform: lowercase

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

text-transform: capitalize

Lorem ipsum dolor sit amet consectetur adipisicing elit.

CSS text-transform Syntax

The syntax of text-transform property in CSS, is:

text-transform: x;

The value of x should be any of the following:

uppercase - used to transform all the letters of the text to uppercase
lowercase - used to transform all the letters of the text to lowercase
capitalize - used to transform only the first letter of all words, to uppercase
none - used not to apply text-transform property. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »