Syntax and Property Values
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.
<!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 geeks.
</p>
</center>
</body>
</html>
Output:
Example: In this example, we are using text-transform: capitalize; property.
<!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 geeks.
</p>
</center>
</body>
</html>
Output:
Example: In this example, we are using text-transform: uppercase; property.
<!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 geeks.
</p>
</center>
</body>
</html>
Output:
Example: In this example, we are using text-transform: lowercase; property.
<!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 geeks.
</p>
</center>
</body>
</html>
Output:
Example: In this example, we are using text-transform: initial; property.
<!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 geeks.
</p>
</center>
</body>
</html>
Output:
The text-transform property in CSS is used for controlling the capitalization of text. By using values such as none, capitalize, uppercase, lowercase, and initial, developers can ensure consistent and visually appealing text formatting. Understanding and utilizing the text-transform property effectively can significantly enhance the readability and aesthetic of web content. Experiment with the examples provided to see how different transformations affect your text and improve your CSS skills.
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
CSS text-transform Property
The text-transform property in CSS is used to control the capitalization of text. By utilizing this property, developers can ensure consistent text formatting across their web pages, enhancing readability and visual appeal. This article provides an in-depth look at the text-transform property, its syntax, various values, and practical examples to demonstrate its usage.