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

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

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

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

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