CSS text-transform

This CSS property allows us to change the case of the text. It is used to control the text capitalization. This CSS property can be used to make the appearance of text in all-lowercase or all-uppercase or can convert the first character of each word to uppercase.

Syntax

Let's discuss its property values along with an example.

capitalize

It transforms the first character of each word to uppercase. It will not capitalize the first letter after the number. It only affects the first letters of the words instead of changing the rest of the letters in the word.

If we apply the capitalize property on a word that already has capital letters, then the letters of that word will not switch to lowercase.

The illustration of this property is given below.

Syntax

Example

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS text-transform Property 
    </title> 
    <style> 
	body{
	text-align:center;
	}
        h1 { 
            color: blue; 
        } 
          
        p{ 
            text-transform: capitalize; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: capitalize</h2> 
        <p>hello world</p> 
        <p>WELCOME to the javaTpoint</p> 
		
</body> 
  
</html>

Test it Now

uppercase

As its name implies, it transforms all characters of the word into uppercase.

Syntax

Example

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS text-transform Property 
    </title> 
    <style> 
	body{
	text-align:center;
	}
        h1 { 
            color: blue; 
        } 
          
        p{ 
            text-transform: uppercase; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: uppercase</h2> 
        <p>hello world</p> 
        <p>WELCOME to the javaTpoint</p> 
		
</body> 
  
</html>

Test it Now

lowercase

It transforms all characters of the word into lowercase.

Syntax

Example

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS text-transform Property 
    </title> 
    <style> 
	body{
	text-align:center;
	}
        h1 { 
            color: blue; 
        } 
          
        p{ 
            text-transform: lowercase; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: lowercase</h2> 
        <p>HELLO WORLD</p> 
        <p>WELCOME TO THE JAVATPOINT</p> 
		
</body> 
  
</html>

Test it Now

none

It is the default value that has no capitalization. It renders the text as it is.

Syntax

Example

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS text-transform Property 
    </title> 
    <style> 
	body{
	text-align:center;
	}
        h1 { 
            color: blue; 
        } 
          
        p{ 
            text-transform: none; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: none</h2> 
        <p>Hello World</p> 
        <p>Welcome to the javaTpoint.</p> 
		
</body> 
  
</html>

Test it Now

Next TopicCSS outline

← prev next →