CSS text-transform Property

The text-transform property is used to control the capitalization of the text.

Syntax:

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

Property Values:

  • none: It has a default value. It has no Capitalization.

    Syntax:

    text-transform: none;

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS text-transform Property
        </title>
        <style>
            h1 {
                color: green;
            }
              
            p.gfg {
                text-transform: none;
            }
        </style>
    </head>
      
    <body>
        <center>
            <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>

    chevron_right

    
    

    Output:

  • capitalize: It is used to transform the first character of each word to uppercase.

    Syntax:

    text-transform:capitalize;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • uppercase: It is used to convert or transform all characters in each word into uppercase.

    Syntax:

    text-transform:uppercase;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS text-transform Property
        </title>
        <style>
            h1 {
                color: green;
            }
              
            p.gfg {
                text-transform: uppercase;
            }
        </style>
    </head>
      
    <body>
        <center>
            <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>

    chevron_right

    
    

    Output:

  • lowercase: It is used to convert or transform all characters in each word to alowercase.
    Syntax:

    text-transform:lowercase;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS text-transform Property
        </title>
        <style>
            h1 {
                color: green;
            }
              
            p.gfg {
                text-transform: lowercase;
            }
        </style>
    </head>
      
    <body>
        <center>
            <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>

    chevron_right

    
    

    Output:

  • initial: It sets the property to its Default Value.

    Syntax:

    text-tansform:initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS text-transform Property
        </title>
        <style>
            h1 {
                color: green;
            }
              
            p.gfg {
                text-transform: initial;
            }
        </style>
    </head>
      
    <body>
        <center>
            <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>

    chevron_right

    
    

    Output:

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

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 1.0
  • Safari 3.5



My Personal Notes arrow_drop_up

Recommended Posts:

    Article Tags :

    1


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.