CSS
How do you make each word in a text start with a capital letter?
When a long text is written & it needs to be converted in Title case or Capital case then it becomes tedious to make it in capitals manually.
Using CSS, we can easily convert the text into Capital case or Title case.
This simply means that the first letter of the word will be converted into a Capital letter using CSS.
Contents
How do you make each word in a text start with a capital letter with CSS?
To make each word start with a capital letter CSS property text-transform: capitalize; is used.
Once this CSS property is set then it will be applied to all the text content within the element it is applied to.
In our below example, we apply this property with the help of a class to a div element.
CSS :-
.text-capital {
text-transform: capitalize;
}
HTML :-
<div> this is a normal text. it has no styles applied. </div> <br /> <div class="text-capital"> this is also a normal text. it has styles applied. </div>
Result :-
In CSS style, we have created a new class named text-capital with property text-transform: capitalize.
This class can be applied to any element on the page.
In the HTML code, we have applied the class to the 2nd div element.
As we can see in the Result image, the 2nd div
CSS - text-transform Property
CSS text-transform Property is used to define the case of the words. There are 5 values that can be used for this property.
By default, none is applied to all elements. This means the words will display as they have been written without any modifications.
| uppercase | All the text will be displayed in uppercase. |
| lowercase | All the text will be displayed in lowercase. |
| capitalize | First character of all the words will be displayed in uppercase |
| none | There will be no text transformation. The text will display as it is. |
| inherit | The text will be displayed as per the parent element style. |
HTML :-
<div style="text-transform: uppercase;">uppercase - this is a text for demonstration purpose.</div> <div style="text-transform: lowercase;">lowercase - this is a text for demonstration purpose.</div> <div style="text-transform: capitalize;">capitalize - this is a text for demonstration purpose.</div> <div style="text-transform: none;">none - this is a text for demonstration purpose.</div> <div style="text-transform: inherit;">inherit - this is a text for demonstration purpose.</div>
Result :-
Summary
We have explained in this blog the use of text-transform CSS property for transforming the text in various different forms.
We have also cleared the point on "How to make each word in a text start with a capital letter".
Do comment below for any more queries.