How do you capitalize letters in CSS?

By Gulshan Saini
Published in CSS
May 25, 2020
1 min read

I prefer using CSS over JavaScript wherever possible and capitalizing/transforming text is a great example where I would prefer using CSS. Small optimizations are great in the long run.

Another, good reason to choose CSS over JavaScript to capitalize letters is if the text is dynamic or will be changed in the future using some dynamic operation. In case of JavaScript we need to again call the toUpperCase() function over the string however this is not the case with CSS - once you have declared in CSS that you want the text to be capitalized you need not worry again even if the text changes in future.

In this post we will be focusing on two text-transform values, those are

  • uppercase
  • capitalize

Capitalize entire sentence

When we want to capitalize entire sentence we need to use text-transform: uppercase. This will make the entire sentence in the upper case. Observe, our input is completely in lower case.

<p style="text-transform: uppercase;">what is lorem ipsum?</p>


what is lorem ipsum?

Capitalize the first letter of each word

Another, requirement could be to just capitalize the first letter of each word of a sentence. To achieve this we need to use text-transform: capitalize

<p style="text-transform: capitalize;">what is lorem ipsum?</p>


what is lorem ipsum?

Capitalize the first letter of a sentence

You may just want to capitalize only the first letter of the sentence. You might have noticed this pattern in magazines, newspapers, and some popular blogs. To achieve this we need to target only the first letter using pseudo-element ::first-letter as follows

  .text::first-letter {
    text-transform: capitalize;

<!-- we apply text class to paragraph below -->
<p class="text">what is lorem ipsum?</p>


what is lorem ipsum?

Only, first letter is capitalized and rest of sentence remain in lowe case.

Tip: You can even grab user attention by making first letter little large than the rest of the content and giving it a different color

  .text::first-letter {
    text-transform: capitalize;
    font-size: 200%;
    color: #ec00da;


what is lorem ipsum?


Previous Article
How To Set Node Value In Javascript?

Related Posts

How to use CSS custom variables and properties?
June 06, 2020
2 min
Gulshan Saini

Gulshan Saini

Fullstack Developer



Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2022, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media