HomeTutorsContact

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.

Output

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

Output

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

Output

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

Output

what is lorem ipsum?


Tags

#css
Previous Article
How To Set Node Value In Javascript?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to use CSS custom variables and properties?

June 06, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media