CSS Tricks for Uppercase and LowerCase and TitleCase



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


text-transform


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

lowercase: It changes the all letters into lowercase.

uppercase: It changes the all letters into uppercase.

capitalize: It changes the 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 following HTML markup into consideration.


<p> This is elite corner article </p>




lowercase - How to change all letters into lowercase.

Input : This is elite corner article

Code:

p {
  text-transform: lowercase;
 }


Output : this is elite corner article


uppercase - How to change all letters into uppercase.

Input : This is elite corner article

Code:

p {
  text-transform: uppercase;
 }


Output : THIS IS ELITE CORNER ARTICLE


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

Input : This is elite corner article

Code:

p {
  text-transform: capitalize;
 }


Output : This Is Elite Corner Article


none - It doesn't change any value.

Input : This is Elite corner ARTICLE

Code:

p {
  text-transform: none;
 }


Output : This is Elite corner ARTICLE


I hope you like this article.

Also, read:




Share with your friends if you like this post.



CSS Tricks for Uppercase and LowerCase and TitleCase CSS Tricks for Uppercase and LowerCase and TitleCase Reviewed by Unknown on August 22, 2018 Rating: 5

No comments:

Powered by Blogger.