CSS Text Transform: You Don't Need JavaScript to Capitalize Your Text

A green css icon

Sometimes we overengineer things...

In this previous article I showed you how to capitalize a string with JavaScript.

Here's a snippet from it:

let str = "hello world";
let capitalizedStr = str.slice(0, 1).toUpperCase() + str.slice(1);
console.log(capitalizedStr); // "Hello world"

This might be useful in some cases, but if you are doing it to display a value, there is an easier way.

CSS Text Transform Property

The CSS text-transform property is used to specify text capitalization in an element. This property can be applied to any text-containing element, like paragraphs, headings, lists, etc. The text-transform property accepts the following values:

  • none - Leaves the value unchanged
  • capitalize - Capitalize the value
  • uppercase - Uppercase the value
  • lowercase - Lowercase the value

So to capitalize our paragraphs, it would be as simple as applying the following in our CSS:

p {
  text-transform: capitalize;

The CSS text-transform property is a powerful tool for manipulating text styles on a web page, making them convenient to know. 🦾

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉

Web DevelopmentCSSFrontend
Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.


Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.