How do you make each word in a text start with a capital letter in CSS?

How do you make each word in a text start with a capital letter in CSS?

For making each word in a text to start with a capital letter, we use CSS property text-transform: capitalize.

When this property is applied to an element in the HTML document, the content text within that particular element will be displayed in capitals.

Let’s see an example to showcase the functionality.

CSS :-

	p {
	   text-transform: capitalize;
	} 

HTML :-

	<p>
	   In this para, all the words will be displayed capitalized.
	</p> 

Result :-

In the CSS code, we have used the text-transform property with value as capitalize & applied it on the paragraphs.

In the HTML code, we have created a paragraph with some text within it.

In the Result image, we can see that all the words within the para are tranformed into first letter as capital.

How to use text-transform in CSS?

There are so many CSS properties, the knowledge of these properties help to gain more control over implementing the unique design.

One such property is text-transform, that can be used within the styles to capitalize text with various different options.

This property will help manipulate the text into uppercase, lowercase or capitalized case.

Here is the CSS code for using this property with 3 different styles.

CSS :-

	p {
	   text-transform: capitalize;
	} 

	p {
	   text-transform: lowercase;
	} 

	p {
	   text-transform: uppercase;
	} 

Recap

We have explored the CSS property text-transform to capitalize the words within an HTML element.

With practical demonstration, it can be understood that using this CSS property, the first letter can be smoothly capitalized.