CSS text-transform property

In this tutorial, we’ll learn how we can change the element’s text into uppercase, lowercase and titlecase using text-transform property.

CSS has text-transform property to control the text capitalization.

Firefox takes language into consideration. You can learn more about here: CSS Text Transform

In this article, we’ll see how can we use css text-transform property value to capitalize the first letter of word, to convert all letters into uppercase(All cap), to convert all letters into lowercase.

We’ll also see an advanced example to capitalize the first letter of a sentence.

Table of Contents

text-transform

text-transform property can have the following 6 values for managing text:

lowercase: It changes all letters into lowercase.

uppercase: It changes all letters into uppercase.

capitalize: It changes each word’s first letter in a capital letter.

none: It is the default value, and it keeps the value as it is entered.

inherit: Inherit this property form the parent element.

In all following example, we’ll take the following HTML markup into consideration.

<br /><p> This is an example of css lowercase. </p><br />

lowercase – How to change all letters into lowercase.

Input : This is an example of css lowercase.

Code:

<br />p {<br />  text-transform: lowercase;<br /> }<br />

Output : this is an example of css lowercase.

uppercase – How to change all letters into uppercase.

Input : This is an example of css uppercase.

Code:

<br />p {<br />  text-transform: uppercase;<br /> }<br />

Output : THIS IS AN EXAMPLE OF CSS UPPERCASE.

capitalize – How to capitalize the first letter of each word.

Input : This is an example of css capitalize

Code:

<br />p {<br />  text-transform: capitalize;<br /> }<br />

Output : This Is An Example Of Css Capitalize.

none – It doesn’t change any value.

Input : This is Elite corner ARTICLE

Code:

<br />p {<br />  text-transform: none;<br /> }<br />

Output : This is Elite corner ARTICLE

capitalize the first letter of a sentence.

If you want to capitalize only the first letter of a sentence instead of capitalizing the first letter of all words of a sentence, you’ll need to use css pseudo selector called :first-letter

Input : this is an article about css text-transform property to capitalize only the first letter of a sentence.

Code:

<p class="sentence"><br />this is an article about css text-transform property <br />to capitalize only the first letter of a sentence.<br /></p><br />

.sentence:first-letter {<br /> text-transform: capitalize;<br />}

Output : This is an article about css text-transform property to capitalize only the first letter of a sentence.

I hope you like this CSS text-transform article. Share with your friends if you like this post.