CSS text-transform

Home / CSS – Tutorial / CSS text-transform

This CSS text-transform property provides to change the case of the text.

capitalize
uppercase
lowercase
none
initial
inherit

capitalize:

Syntax:

text-transform: capitalize;

Example:

<!DOCTYPE html>
<html>

<head>
  <title>
    CSS text-transform Property
  </title>
  <style>
      body{
      text-align:center;
      }

   p{
      text-transform: capitalize;
    }
  </style>
</head>

<body>
  <center> 
    <p>hello world</p>
    <p>WELCOME to the I2tutorials</p>

</body>

</html>

OUTPUT:

CSS text-transform

uppercase:

Syntax:

text-transform: uppercase;

Example:

<!DOCTYPE html>
<html>

<head>
  <title>
    CSS text-transform Property
  </title>
  <style>
      body{
      text-align:center;
      }

    p{
      text-transform: uppercase;
    }
  </style>
</head>

<body>
  <center>

    <p>hello world</p>
    <p>WELCOME to the I2tutorials</p>

</body>

</html>

OUTPUT:

lowercase:

Syntax:

text-transform: lowercase;

Example:

<!DOCTYPE html>
<html>

<head>
  <title>
    CSS text-transform Property
  </title>
  <style>
      body{
      text-align:center;
      }
    p{
      text-transform: lowercase;
    }
  </style>
</head>

<body>
  <center>
    <p>HELLO WORLD</p>
    <p>WELCOME TO THE I2tutorials</p>

</body>

</html>

OUTPUT:

CSS text-transform

none:

Syntax:

text-transform: none;

Example:

<!DOCTYPE html>  
<html>  

<head>  
  <title>  
    CSS text-transform Property  
  </title>  
  <style>  
  body{ 
  text-align:center; 
  } 
    p{  
      text-transform: none;  
    }  
  </style>  
</head>  

<body>  
  <center>  
    <p>Hello World</p>  
    <p>Welcome to the I2tutorials.</p>  

</body>  

</html>

OUTPUT:

CSS text-transform