In CSS, the text-transform property is used to control the capitalization of text within an element. This property allows you to transform text to uppercase, lowercase, capitalize.
Syntax
selector {
text-transform: value;
}
text-transform values
none: Default. No transformation is applied.
capitalize: Transforms the first character of each word to uppercase.
uppercase: Transforms all characters to uppercase.
lowercase: Transforms all characters to lowercase.
full-width: Changes the text to full-width form (typically used in East Asian typography).
inherit: Inherits the text-transform value from its parent element.
initial: Sets the property to its default value.
Examples
1. Capitalize:
p.capitalize {
text-transform: capitalize;
}
2. Uppercase:
p.uppercase {
text-transform: uppercase;
}
3. Lowercase:
p.lowercase {
text-transform: lowercase;
}
4. Full-width:
p.full-width {
text-transform: full-width;
}
5. None (No Transformation):
p.none {
text-transform: none;
}
Example: Here is an example of a simple HTML page demonstrating various uses of the text-transform property:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.full-width {
text-transform: full-width;
}
.none {
text-transform: none;
}
</style>
</head>
<body>
<p class="capitalize">this text will have each word capitalized.</p>
<p class="uppercase">this text will be transformed to uppercase.</p>
<p class="lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
<p class="full-width">this text will be transformed to full-width form.</p>
<p class="none">This Text Will Not Be Transformed.</p>
</body>
</html>