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!
- Create an RSS Reader in Node
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- How to build a Discord bot using TypeScript
- Getting Started with Deno
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Getting Started with Handlebars.js
- Getting User Location using JavaScript's Geolocation API
- Setting Up Stylus CSS Preprocessor
- How To Create a Modal Popup Box with CSS and JavaScript
- Getting Started with Moon.js