CSS text-transform Property
The text-transform property is used to control the capitalization of the text.
Syntax:
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Property Values:
- none: It has a default value. It has no Capitalization.
- capitalize: It is used to transform the first character of each word to uppercase.
- uppercase: It is used to convert or transform all characters in each word into uppercase.
- lowercase: It is used to convert or transform all characters in each word to lowercase.
- initial: It sets the property to its Default Value.
Example: In this example, we are using text-transform: none; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-transform Property </ title > < style > h1 { color: green; } p.gfg { text-transform: none; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >text-transform: none:</ h2 > < p class = "gfg" >w3wiki</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ p > </ center > </ body > </ html > |
Output:
Example: In this example, we are using text-transform: capitalize; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-transform Property </ title > < style > h1 { color: green; } p.gfg { text-transform: capitalize; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >text-transform: capitalize:</ h2 > < p class = "gfg" >w3wiki</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ p > </ center > </ body > </ html > |
Output:
Example: In this example, we are using text-transform: uppercase; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-transform Property </ title > < style > h1 { color: green; } p.gfg { text-transform: uppercase; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >text-transform: uppercase:</ h2 > < p class = "gfg" >w3wiki</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ p > </ center > </ body > </ html > |
Output:
Example: In this example, we are using text-transform: lowercase; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-transform Property </ title > < style > h1 { color: green; } p.gfg { text-transform: lowercase; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >text-transform: lowercase:</ h2 > < p class = "gfg" >w3wiki</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ p > </ center > </ body > </ html > |
Output:
Example: In this example, we are using text-transform: initial; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-transform Property </ title > < style > h1 { color: green; } p.gfg { text-transform: initial; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >text-transform: initial:</ h2 > < p class = "gfg" >w3wiki</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ p > </ center > </ body > </ html > |
Output:
Supported Browsers: The browser supported by CSS Text-Transform property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 7.0 and above
- Safari 1.0 and above