CSS text-transform Property

Last Updated : 28 May, 2026

The text-transform property in CSS is used to change the capitalization style of text. It helps improve the presentation and formatting of webpage content.

  • It can convert text to uppercase, lowercase, or capitalize.
  • It changes only the display of text, not the original content.
  • The property helps maintain consistent text styling across a webpage.

Syntax

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

Property Values

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

ValueDescription
noneDefault value. No capitalization.
capitalizeTransforms the first character of each word to uppercase.
uppercaseConverts all characters in each word to uppercase.
lowercaseConverts all characters in each word to lowercase.
initialSets 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;

Here, 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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-transform Property
    </title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }

        p.gfg {
            text-transform: none;
        }
    </style>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

Example 2: Using text-transform: capitalize;

Here, 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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS text-transform Property
    </title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }

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

<!--Driver Code Starts-->
</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>

<!--Driver Code Ends-->

Example 3: Using text-transform: uppercase;

Here, 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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-transform Property
    </title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }

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

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

Example 4: Using text-transform: lowercase;

Here, 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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-transform Property
    </title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }

        p.gfg {
            text-transform: lowercase;
        }
    </style>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

Example 5: Using text-transform: initial;

Here, 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
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-transform Property
    </title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }

        p.gfg {
            text-transform: initial;
        }
    </style>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Comment

Explore