How to Convert Text to Lowercase using CSS?

CSS Convert Text to Lowercase

To convert text to lowercase in HTML Element(s) using CSS, assign text-transform CSS property with the value lowercase for the HTML Element(s).

The syntax to set text-transform property for the HTML Element is

text-transform: lowercase;

Examples

Transform Text in Paragraph to Lowercase

In the following example, we convert the text in the paragraph element with id p1 to lowercase.

Example

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

Transform Text in Heading, Anchor Text to Lowercase

In the following example, we convert the text in the heading, and anchor text, to lowercase.

Example

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

Conclusion

In this CSS Tutorial, we learned how to transform text in HTML Element(s) to lowercase alphabets using CSS.