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.
Syntax:
text-transform: none;
- Example:
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>GeeksForGeeks</h1> <h2>text-transform: none:</h2> <p class="gfg">GeeksforGeeks</p> <p class="gfg"> It is a computer science portal for geeks. </p></body></html> |
- Output:
- capitalize: It is used to transform the first character of each word to uppercase.
Syntax:
text-transform:capitalize;
- Example:
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>GeeksForGeeks</h1> <h2>text-transform: capitalize:</h2> <p class="gfg">GeeksforGeeks</p> <p class="gfg"> It is a computer science portal for geeks. </p></body></html> |
- Output:
- uppercase: It is used to convert or transform all characters in each word into uppercase.
Syntax:
text-transform:uppercase;
- Example:
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>GeeksForGeeks</h1> <h2>text-transform: uppercase:</h2> <p class="gfg">GeeksforGeeks</p> <p class="gfg"> It is a computer science portal for geeks. </p></body></html> |
- Output:
- lowercase: It is used to convert or transform all characters in each word to a lowercase.
Syntax:
text-transform:lowercase;
- Example:
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>GeeksForGeeks</h1> <h2>text-transform: lowercase:</h2> <p class="gfg">GeeksforGeeks</p> <p class="gfg"> It is a computer science portal for geeks. </p></body></html> |
- Output:
- initial: It sets the property to its Default Value.
Syntax:
text-transform:initial;
- Example:
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>GeeksForGeeks</h1> <h2>text-transform: initial:</h2> <p class="gfg">GeeksforGeeks</p> <p class="gfg"> It is a computer science portal for geeks. </p></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
Please Login to comment...