How to Lowercase text with CSS

By Atul Rai | Last Updated: November 8, 2022

Similar to the previous article, we can use the text-transform: lowercase; property to transform any text into lowercase.

How to lowercase text with CSS

Use the following style declaration to convert a text to lowercase in CSS:

element-selector {
  text-transform: lowercase;
}

Have a look at the complete HTML code.

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Lowercase with CSS</title>

    <style>
        .to-lower {
            text-transform: lowercase;
        }
    </style>
</head>

<body>
    <p class="to-lower">Live and Let Live!</a></p>

</body>

</html>

Result of above code.

Transform text using CSS property

P.S. This declaration does not change the content of the DOM. If you inspect the text in the DOM, the text remains the same like this:

CSS transform property does not change the DOM

References

  1. CSS Text Transform
  2. How to uppercase text with CSS

Similar Posts

About the Author

Atul Rai
I love sharing my experiments and ideas with everyone by writing articles on the latest technological trends. Read all published posts by Atul Rai.