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

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. 🎉