How to Convert Text to Uppercase using CSS?

CSS Convert Text to Uppercase

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

text-transform: uppercase;

Example

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

Convert text to uppercase in other HTML Elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #h1_1 {
            text-transform: uppercase;
        }
        #a1 {
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <h1 id="h1_1">my heading</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 uppercase alphabets using CSS.