Open In App

How to change the cases of text in paragraph using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

The approach of this article is to how to change cases of text in a paragraph by using the CSS  text-transform Property. It is s used to control the capitalization of the text. It mainly changes the text into upper case and lowercase format.

Syntax: 

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

Example:

css




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
         
        p.gfg {
            text-transform: capitalize;
        }
        p.GFG
        {
            text-transform:uppercase;
        }
        p.sudo
        {
            text-transform:lowercase;
        }
         
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>
        How to change cases of text
in paragraph using CSS?
</h2>
         
        <p class="gfg">capitalize</p>
        <p class="sudo">
        lower case letter
        </p> 
        <p class="GFG">
        uppercase letter</p>
</body>
 
</html>


Output:

Supported Browsers are listed below:

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


Last Updated : 09 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads