This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



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.