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.
text-transform
text-transform property can have the following 6 values for managing text:
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.
<br /><p> This is an example of css lowercase. </p><br />
lowercase – How to change all letters into lowercase.
<br />p {<br /> text-transform: lowercase;<br /> }<br />
uppercase – How to change all letters into uppercase.
<br />p {<br /> text-transform: uppercase;<br /> }<br />
capitalize – How to capitalize the first letter of each word.
<br />p {<br /> text-transform: capitalize;<br /> }<br />
none – It doesn’t change any value.
<br />p {<br /> text-transform: none;<br /> }<br />
capitalize the first letter of a sentence.
<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 />}
I hope you like this article.
Also, read:
Share with your friends if you like this post.