CSS How to Capitalize the First Letter of Each Word in CSS

In this article, we’ll explain how to capitalize the first letter of each word using CSS. In web design and development, we sometimes need to format text, and one common formatting technique is capitalizing the first letter of each word. Here are a few ways to achieve this effect.

Read more: CSS Tutorial

Using the text-transform Property

The text-transform property changes the capitalization of text. It has the following possible values: none, capitalize, uppercase, lowercase, full-width, and full-size-kana. We’ll use the capitalize value to capitalize the first letter of each word.

p { text-transform: capitalize; 
}

The above code will apply to all

elements. If you only want to apply to specific elements, you can adjust the selection accordingly. After running the above code, all text content will be displayed with the first letter of each word capitalized.

It’s important to note that text-transform only changes the display of the text; it doesn’t alter the actual HTML structure. Even though we change the capitalization of the text, its actual value on the page remains unchanged. So, if you need to use the original value of the text elsewhere, such as in JavaScript or user input fields, it will retain its original capitalization.

Using the ::first-letter Pseudo-Element

In addition to the text-transform property, we can also use the ::first-letter pseudo-element selector to achieve this effect. This pseudo-element selector selects only the first letter of an element and applies special styling to it.

p::first-letter {
text-transform: uppercase; 
} 

This code will select the first letter of each

element and convert it to uppercase. However, it’s important to note that the ::first-letter pseudo-element only targets the first letter of a block-level element, and that letter must appear before any other content. If the first letter isn’t a separate character, such as the “i” in the word “it's,” the ::first-letter pseudo-element won’t work.

Using JavaScript

Another way to capitalize the first letter of each word in CSS is to use

.capitalize {
text-transform: capitalize; 
} 

<p class="capitalize">this is a sample text</p> 

const element = document.querySelector('.capitalize'); 
element.style.textTransform = "capitalize"; 

The above code capitalizes the first letter of each word by adding a class to the

element. You can also use JavaScript to dynamically add or remove classes to change the text’s style as needed.

Additional Notes

It’s important to note that while these methods capitalize the first letter of each word, they don’t change the original case of the text. This means that if the text is copied or pasted outside of CSS styles, it will retain its original case. Similarly, if you need to process user-entered text, these methods won’t change the case of the text.

Also, using these methods may result in inconsistent results in some cases. For example, some languages ​​or abbreviations don’t require capitalization of the first letter of each word, and forcing these methods may result in errors.

Summary

This article describes how to capitalize the first letter of each word in CSS. You can use the text-transform property to change the case of text, the ::first-letter pseudo-element selector to select and modify the first letter of an element, or dynamically change the style of an element using JavaScript. However, it’s important to note that these methods don’t change the original case of the text and may result in inconsistent or incorrect results in some cases. When using these methods, you should exercise discretion and adjust them appropriately based on your specific needs.