How to Capitalize the First Letter in a Word With CSS

To capitalize the first letter in a word with CSS, we use the first-letter selector:

Let’s say you have a heading in all lowercase letters:

<h2>this is a lowercase heading</h2>

And you want to make the t of “this” uppercase. Simply attach the first-letter selector to h2 in your CSS stylesheet:

h2:first-letter {
  text-transform: capitalize;
}

You can of course apply first-letter selector to a class attribute as well:

.name-of-class:first-letter {
  text-transform: capitalize;
}