CSS: How to Capitalize Each Word in Text – Easy Styling with text-transform

When styling web content, you may want to ensure that each word in a sentence or heading starts with a capital letter—a style commonly used in titles, buttons, and product labels. Luckily, CSS provides a simple and effective way to do this using the text-transform property.

In this blog post, you’ll learn how to capitalize each word using CSS, when to use it, and what to watch out for.

✅ The Tool: text-transform: capitalize;

The CSS text-transform property allows you to control the case of text without changing the actual HTML content.

📌 To capitalize each word:

.capitalize {
  text-transform: capitalize;
}

📌 HTML Example:

<p class="capitalize">this is a heading styled with css</p>

✅ Result:

“This Is A Heading Styled With Css”

✅ Where to Use It

You can apply text-transform: capitalize; to any text-based HTML element, such as:

h1, h2, h3, p, button, a {
  text-transform: capitalize;
}

📌 Example with Button:

<button class="capitalize">submit form</button>

Output: “Submit Form”

❗ Limitations

While text-transform: capitalize; capitalizes the first letter of each word, it:

• Doesn’t lowercase other letters (e.g., iPHONE becomes IPHONE)
• Doesn’t consider language grammar rules (e.g., prepositions may also be capitalized)

To solve this, use it only when needed, or manually adjust content for proper title casing if accuracy matters.

🧾 Summary

🧠 Conclusion

Using text-transform: capitalize; in CSS is a quick and efficient way to make each word in a string start with a capital letter. It’s perfect for headings, buttons, and links where consistency in styling matters more than grammatical accuracy.

Pro Tip: Combine text-transform with good typography (font size, weight, spacing) for professional and readable UI elements.