When styling text on a webpage, controlling capitalization is often a key part of the design. Sometimes, you want every word in a sentence or heading to start with a capital letter — for example, turning “hello world from css” into “Hello World From CSS.”
Fortunately, CSS provides an easy way to do this with the text-transform property.
Using text-transform: capitalize;
The CSS property you’re looking for is:
text-transform: capitalize;
When applied to an element, this will automatically transform the first letter of each word to uppercase, while the rest of the letters remain lowercase.
Example:
<p class="capitalized-text">this is a sample sentence.</p>
.capitalized-text {
text-transform: capitalize;
}
Result:
This Is A Sample Sentence.
Important Notes
text-transform: capitalize;only affects the first letter of each word, not the entire word.- If the original text has uppercase letters inside words, those letters remain unchanged.
- The actual content in the HTML is not modified; the change is purely visual.
- This works well for most Latin-based languages but may behave differently with some special characters or languages.
Other Useful text-transform Values
uppercase– Converts all letters to uppercase.lowercase– Converts all letters to lowercase.none– Default; no transformation.
When to Use capitalize
- Styling headings or titles.
- Formatting user input or labels.
- Consistent visual presentation for UI elements.
Summary
To make each word in your text start with a capital letter using CSS, simply add:
text-transform: capitalize;
to your element’s style. It’s a quick and efficient way to enhance readability and aesthetics without altering the underlying HTML.
