Text-transform

The text-transform property controls capitalization effects of an element's text.

The text-transform property can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

CSS Syntax

text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
        p{text-transform:uppercase}
      </style>
   </head>
   <body>

        <div>This is some text . Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div>

       <p> This is some paragraph.</p>


   </body>
</html>

Let's see an another example:

<!DOCTYPE html>
<html>
   <head>
      <style>
        h2{text-transform:capitalize}
        p{text-transform:lowercase}
      </style>
   </head>
   <body>

       <h2>Text transform property</h2>
       <p> THIS IS SOME PARAGRAPH FOR EXAMPLE.</p>

   </body>
</html>

Property Values

Value Descriptions
none This is default value. No capitalization effects.
capitalize It makes the first character of each word uppercase.
uppercase It makes all characters of each word uppercase.
lowercase It makes all characters of each word lowercase.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.




Related articles