CSS – Set First Character in Each Word to Uppercase

To set first character in each word of text to uppercase in HTML Element(s) using CSS, assign text-transform CSS property with the value capitalize for the HTML Element(s).

</>
Copy
text-transform: capitalize;

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <p id="p1">this is a paragraph.</p>
</body>
</html>

Capitalize text in other HTML Elements.

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #h1_1 {
            text-transform: capitalize;
        }
        #a1 {
            text-transform: capitalize;
        }
    </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 set capitalize each word in the text of HTML Element(s) using CSS.