Convert Text to Lowercase with CSS

To convert text to lowercase with CSS, we will be using the lowercase value of text-transform property.

Example

In this example, we are using text-transform property and displaying the result as before and after the conversion using p tag.

Open Compiler
<html>
<head>
    <style>
        #lcase{
            text-transform:lowercase;
        }
    </style>
</head>
<body>
    <h3>
        Convert Text to Lowercase with CSS
    </h3>
    <p>
        In this example we have used <strong>text-
        transform</strong> property to convert the 
        text to lowercase.
    </p>
    <hr>
    <p>This is a NORMAL text with Mixed CASes.</p>
    <h4>After Conversion to Lower Case:</h4>
    <p id="lcase">
        This is a NORMAL text with lower CASe.
    </p>
</body>
</html>

Conclusion

To convert text to lowercase with CSS in this article, we have used text-transform property. We have only this method available when we are using only CSS.

Updated on: 2024-09-11T14:40:50+05:30

216 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements