How to Capitalize the First Letter of a Word using CSS
Table of Contents
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:
- HTML
We can target just the first letter by using the first-letter
pseudo-class.
CSSp: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.
CSSp:first-letter {
text-transform: capitalize;
}
Try it below:
- HTML
- CSS
You should now see that the text reads:
BASHHello 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!
- How to Install Node on Windows, macOS and Linux
- Managing PHP Dependencies with Composer
- Create an RSS Reader in Node
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- How to deploy a Deno app using Docker
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Getting Started with Handlebars.js
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Building a Real-Time Note-Taking App with Vue and Firebase
- Getting Started with React