Text Transform
If you don’t know how to capitalize the first letter of every word in HTML content, this article is for you. This article is about how you make each word in a text start with a capital letter? and values of the text-transform property.
We need to use the CSS text-transform property to convert the entire content of an HTML element to capital letters or lowercase and to start each word in the text with a capital letter. Text-transform property is used to specify the text case to be apply. In the text-transform property, we can assign three values uppercase, lowercase, and capitalize. Let’s see the three types of values in a text-transform property.
How do you make each word in a text start with a capital letter?
<h1 style=" text-transform:capitalize;">
freedom lifstyle </h1>Output:
To capitalize each first word in your HTML text, you need to use the CSS “text-transform” property and give it a value as “capitalize“. The first text of your heading or title should be in caps, so if you put it in small letters you can use this method to quickly change the first text of your heading to caps. The “capitalize” value is don’t affect characters that are already in uppercase they don’t transform them to lowercase. Even given a single letter “A” it is assume to be an initial letter and becomes a capital letter.
If you want to capitalize every first letter in the H1 element, use the CSS element selector and set the text-transform property to capitalize. If you want to capitalize every first letter in a specific element, give the same class name only to the specific element and use the text-transform property to capitalize using the CSS class selector.
- Any word entered after a space will transform into a capital letter. For example, if you enter (the space) it will transform to (The Space).
- If you give a number it will display that number as it is and the word next to the number will not be capitalized. For ex: if you give (June 6th, 2020) it will be display as it is and it will not be display as (June 6Th, 2020).
- And if you give a special character (i.e. %, &, ” ) then the word next to that special character will be converted to a capital letter. For example, if you enter (“hello everyone”) double quotes are special characters, so it will be convert to (“Hello Everyone”).
Change Lowercase to Uppercase
<p style=" text-transform:uppercase;">
text transformation tutorial </p>Output:
To convert your content from lower to uppercase, you can take the text-transform property and assign the value as uppercase. It transforms every small letter into a capital letter. You can use the uppercase value in the CSS text-transform property to change an important word. Ex: WARNING.
Change Uppercase to Lowercase
<p style=" text-transform:lowercase;">
TEXT TRANSFORMATION TUTORIAL </p>Output:
To convert your content from uppercase to lowercase, you can take the text-transform property and assign the value as lowercase. It transforms every capital letter into a small letter. If you type with capslock on, and all your text will display in uppercase. In this situation, you can use the “Lowercase” value in the CSS text-transform property.
Conclusion
If you want to transform an HTML paragraph texts you don’t need to manually transform each word. You can easily transform it using the CSS text-transform property. So, I hope you will learn how to transform the text of HTML content.
