Text is one of the most significant part of any webpage. Every website has text in either form i.e. it can be a paragraph, headings, etc. Therefore, CSS provides a wide range of text properties for styling and formatting the text such as text-align, text-color, text-transform, etc.
All these properties perform different functionalities, for example, text-align determines the alignment of text i.e. center, right, left, etc. The text-color property sets the color of text i.e. red, green, etc., and so on. However, this write-up will focus on the text-transform property.
This write-up presents a detailed overview of the text-transform property along with some examples.
text-transform property
A most commonly used CSS property that determines the appearance of text in terms of text case i.e. whether the text will be in lower case or upper case. Moreover, it can also be used to capitalize the initial character of every word.
The working of the following values will be discussed in this article with the help of examples:
- uppercase: Converts all characters of the text into uppercase.
- lowercase: Converts all characters of the text into lowercase.
- capitalize: Converts the initial character of each word to a capital letter.
- none: It shows the default behavior of the text-transform property i.e. the text will be displayed the same way as it is written.
How to use uppercase value for text-transform property
The uppercase value transforms all the characters in uppercase
Example
In this example, the text is a mixture of both uppercase and lowercase letters. However, assigning uppercase value to the text-transform property will transform every single letter into uppercase:
HTML
CSS
text-transform: uppercase;
}
We will get the following output:
Every letter is transformed into the the uppercase letter.
How to use lowercase value for text-transform property
It will convert every single character of the text into lower case.
Example
In the below-given code, first letter of every word is a capital letter however assigning lowercase value to the text-transform property will transform all the text into the lowercase:
HTML
CSS
text-transform: lowercase;
}
Above code generates the following output:
Every letter is transformed into the the lowercase letter.
How to use capitalize value for text-transform property
As the name itself suggest, it capitalized the first letter of every word. The below example will show the working of capitalize value.
Example
In the below script, every letter of the document is in lowercase and the capitaize value is utilized for the h2 element so, it will convert the first letter of every word into capital:
HTML
CSS
text-transform: capitalize;
}
The above code generates the following output:
First letter of each word is transformed into capital letter.
How to use none value for text-transform property
The none value prevents all the text from text transformation i.e. it renders all the characters as it is. The below example will let you understand how to use “none” value for the text-transform property.
Example
The following piece of code implements the text-transform property on a p, h2 element:
HTML
CSS
text-transform: none;
}
The above code wouldn’t change the text appearance:
All the text remains unchanged.
Conclusion
CSS provides text-transform property to control the text transformation i.e. lowercase and uppercase convert all the letters into lowercase and uppercase respectively and the none value renders the text in the default case. The capitalize property renders the first character of every word into uppercase.
This write-up explains how to use the text-transform property. What are the values that can be used for the text-transform property and how do these values affect the appearance of the text?
