How Do You Make Each Word in a Text Start with a Capital Letter Using CSS?

In modern web design, formatting text for readability and visual consistency is essential. One common style preference is capitalizing the first letter of every word — often used in headings, buttons, or product titles.

In this blog post, you’ll learn how to make each word in a text start with a capital letter using CSS, without needing to manually edit the content.

Table of Contents

✅ CSS Property: `text-transform`

The text-transform property in CSS allows you to control the case of text directly through styling — without modifying the HTML content.

To capitalize the first letter of every word, use:

text-transform: capitalize;

🧾 Example:

💡 HTML:

<p class="title-case">hello world from css styling</p>

🎨 CSS:

.title-case {
  text-transform: capitalize;
}

This will render the text as:

Hello World From Css Styling

🔍 Explanation of `text-transform` Values

Value	Effect
`none`	Default behavior (no change)
`capitalize`	Capitalizes the first letter of each word
`uppercase`	Converts all characters to uppercase
`lowercase`	Converts all characters to lowercase

⚠️ Important Notes

text-transform: capitalize; is visual only — it doesn’t change the original text in the HTML or JavaScript.
It relies on spaces to identify word boundaries.
It does not affect acronyms, special characters, or compound words (e.g., e-mail becomes E-mail, not E-Mail).

🧠 Use Cases

Blog titles and post headings
Button or navigation labels
Product names or item descriptions

🧾 Complete Working Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Capitalize Text Example</title>
  <style>
    .capitalize-text {
      text-transform: capitalize;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <p class="capitalize-text">this text will be capitalized word by word</p>

</body>
</html>

📌 Conclusion

To make each word in a text start with a capital letter using CSS, apply:

text-transform: capitalize;

This is a simple, clean, and effective solution to improve the appearance of headings, buttons, and titles — without editing your actual text content.

✅ CSS Property: text-transform