CSS text-transform Property

Last Updated : 01 Oct, 2024

The text-transform property in CSS is used to control the capitalization of text. It allows you to transform text to uppercase, lowercase, or capitalize the first letter of each word.

Syntax

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

Property Values

Here are the property values for the text-transform CSS property:

Value	Description
none	Default value. No capitalization.
capitalize	Transforms the first character of each word to uppercase.
uppercase	Converts all characters in each word to uppercase.
lowercase	Converts all characters in each word to lowercase.
initial	Sets the property to its default value.

CSS text-transform Property Example

Here are some examples of the CSS text-transform property that will help you clearly understand how it works:

Example 1: Using text-transform: none;

In this example we are using the text-transform: none; property to display text in its original form without any capitalization changes. It demonstrates the default text transformation behavior in a paragraph.

html

<!DOCTYPE html> <html>  <head>     <title>         CSS text-transform Property     </title>     <style>         h1 {             color: green;         }          p.gfg {             text-transform: none;         }     </style> </head>  <body>      <h1>GeeksForGeeks</h1>      <h2>text-transform: none:</h2>     <p class="gfg">GeeksforGeeks</p>       <p class="gfg">         It is a computer science portal for geeks.     </p> </body>  </html>

Output:

Example 2: Using text-transform: capitalize;

In this example we are using the text-transform: capitalize; property to transform the first letter of each word to uppercase. It demonstrates this effect on paragraphs styled with the gfg class.

html

<!DOCTYPE html> <html>    <head>     <title>         CSS text-transform Property     </title>     <style>         h1 {             color: green;         }          p.gfg {             text-transform: capitalize;         }     </style> </head>  <body>     <center>         <h1>GeeksForGeeks</h1>          <h2>text-transform: capitalize:</h2>         <p class="gfg">GeeksforGeeks</p>         <p class="gfg">             It is a computer science portal for geeks.         </p>     </center>  </body>    </html>

Output:

Example 3: Using text-transform: uppercase;

In this example we are using text-transform: uppercase; property to convert all characters in the paragraphs with the gfg class to uppercase. The heading remains in its original form.

html

<!DOCTYPE html> <html>  <head>     <title>         CSS text-transform Property     </title>     <style>         h1 {             color: green;         }          p.gfg {             text-transform: uppercase;         }     </style> </head>  <body>     <h1>GeeksForGeeks</h1>      <h2>text-transform: uppercase:</h2>     <p class="gfg">GeeksforGeeks</p>     <p class="gfg">         It is a computer science portal for geeks.     </p>  </body>  </html>

Output:

Example 4: Using text-transform: lowercase;

In this example we are using text-transform: lowercase; property to convert all characters in the paragraphs with the gfg class to lowercase. The headings remain in their original form.

html

<!DOCTYPE html> <html>  <head>     <title>         CSS text-transform Property     </title>     <style>         h1 {             color: green;         }          p.gfg {             text-transform: lowercase;         }     </style> </head>  <body>      <h1>GeeksForGeeks</h1>      <h2>text-transform: lowercase:</h2>     <p class="gfg">GeeksforGeeks</p>     <p class="gfg">         It is a computer science portal for geeks.     </p>  </body>  </html>

Output:

Example 5: Using text-transform: initial;

In this example we are using the the text-transform: initial; property to set the text transformation to its default value for paragraphs with the gfg class. The headings remain unchanged.

html

<!DOCTYPE html> <html>  <head>     <title>         CSS text-transform Property     </title>     <style>         h1 {             color: green;         }          p.gfg {             text-transform: initial;         }     </style> </head>  <body>      <h1>GeeksForGeeks</h1>      <h2>text-transform: initial:</h2>     <p class="gfg">GeeksforGeeks</p>       <p class="gfg">         It is a computer science portal for geeks.     </p> </body>  </html>

Output:

Supported Browsers

The browser supported by CSS Text-Transform property are listed below:

Google Chrome 5.0
Edge 12
Mozilla 4.0
Safari 5.0
Opera 11.1

Note: Older versions of these browsers may not support all CSS properties, so it’s always a good practice to test your styles across different browsers for compatibility.

CSS text-shadow Property

manaschhabra2

Improve

Article Tags :

CSS text-transform Property

Syntax

Property Values

CSS text-transform Property Example

Example 1: Using text-transform: none;

Example 2: Using text-transform: capitalize;

Example 3: Using text-transform: uppercase;

Example 4: Using text-transform: lowercase;

Example 5: Using text-transform: initial;

Supported Browsers

Similar Reads