CSS texttransform Property (original) (raw)

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:

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 `

<style>
    h1 {
        color: green;
    }

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

<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>

`

**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 `

<style>
    h1 {
        color: green;
    }

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

GeeksForGeeks

    <h2>text-transform: capitalize:</h2>
    <p class="gfg">GeeksforGeeks</p>
    <p class="gfg">
        It is a computer science portal for geeks.
    </p>
</center>

`

**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 `

<style>
    h1 {
        color: green;
    }

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

GeeksForGeeks

<h2>text-transform: uppercase:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
    It is a computer science portal for geeks.
</p>

`

**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 `

<style>
    h1 {
        color: green;
    }

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

<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>

`

**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 `

<style>
    h1 {
        color: green;
    }

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

<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>

`