How to Capitalize the First Letter of a Word using CSS

Modern CSS lets you do some pretty cool things that previously required JavaScript.

One of these features is being able to capitalize the first letter of a word.

Thankfully, you can now do this entirely in CSS.

In this post, we'll learn how to capitalize the first letter of a word in CSS.

How to capitalize the first letter of a word

To start, let's say this is our example HTML:

HTML
<p>hello world</p>

Try it out without styles:

We can target just the first letter by using the first-letter pseudo-class.

CSS
p:first-letter {
    /* styles for the first letter */
}

This will apply styles to just the first letter of the element.

Now if we want to capitalize it, we can just add the text-transform property.

CSS
p:first-letter {
    text-transform: capitalize;
}

Try it below:

You should now see that the text reads:

BASH
Hello world

Conclusion

In this post, we learned how to use CSS to capitalize the first letter of a word.

Simply use the first-letter pseudo-class to target the first letter of an element, and add the text-transform property to capitalize it.

Thanks for reading and happy coding!

• Support Us