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>GeeksForGeeks</h1>
<h2>text-transform: none:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</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>GeeksForGeeks</h1>
<h2>text-transform: capitalize:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</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>GeeksForGeeks</h1>
<h2>text-transform: uppercase:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</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>GeeksForGeeks</h1>
<h2>text-transform: lowercase:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</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>GeeksForGeeks</h1>
<h2>text-transform: initial:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
19 Jun, 2023
Like Article
Save Article