CSS text-transform

CSS text-transform Property

CSS text-transform property sets the capitalization of the text in HTML Element(s).

The syntax to specify a value for text-transform property is

text-transform: value;

The following table gives the possible values that could be given to text-transform property.

Value	Description	Examples
none	No capitalization.	text-transform: none;
capitalize	Converts the first character of each word to uppercase.	text-transform: capitalize;
uppercase	Converts all character in text to uppercase.	text-transform: uppercase;
lowercase	Converts all character in text to lowercase.	text-transform: lowercase;
initial	Sets text-transform to default value.	text-transform: initial;
inherit	Inherits text-transform value from its parent element.	text-transform: inherit;

Examples

In the following examples, we transform the text in HTML Element(s), in terms of case, using text-transform property.

text-transform: capitalize;

In the following example, we set the first character of each word to uppercase, using text-transform property.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <p id="p1">this is a paragraph.</p>
</body>
</html>

text-transform: uppercase;

In the following example, we set all characters to uppercase, using text-transform property.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <p id="p1">this is a paragraph.</p>
</body>
</html>

text-transform: lowercase;

In the following example, we set all characters to lowercase, using text-transform property.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph.</p>
</body>
</html>

text-transform: none;

In the following example, we set text-transform property with none for the paragraph HTML Element.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-transform: none;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph.</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about text-transform property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS text-transform