How to Uppercase text with CSS


Like other programming languages, CSS is also loaded with tons of features in terms of web design, making webpage responsive, etc. In CSS, you can use the text-transform: uppercase; property to transform any text into uppercase.

How to uppercase text with CSS

To convert a text to uppercase in CSS, use the following style declaration:

element-selector {
  text-transform: uppercase;
}

See the complete example.

to-uppercase.html
<!DOCTYPE html>
<html lang="en">

<head>

    <title>Uppercase with CSS</title>

    <style>
        .to-upper {
            text-transform: uppercase;
        }
    </style>
</head>

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

</body>

</html>

Result of above code.

CSS- Convert text to uppercase

Note: 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:

How to uppercase text with CSS

References

  1. CSS Text Transform
  2. How to lowercase 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.