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:
<p>hello world</p>
Try it out without styles:
- HTML
We can target just the first letter by using the first-letter
pseudo-class.
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.
p:first-letter {
text-transform: capitalize;
}
Try it below:
- HTML
- CSS
You should now see that the text reads:
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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!