CSS Text Transformation
The text-transform property controls the capitalization of text in an element.
It can change text to uppercase or lowercase, or capitalize the first letter of each word, without changing the original text in the HTML.
It can take one of these values:
none— no change. The text shows as it is.capitalize— makes the first letter of each word uppercase.uppercase— makes all letters uppercase.lowercase— makes all letters lowercase.
Example
Three paragraphs show the uppercase, lowercase, and capitalize transforms.
Prompt
An HTML page that shows the text-transform property.
In an internal
<style> block, make three paragraph classes: uppercase, lowercase, and capitalize. Add a paragraph of mixed-case text for each so the effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This Text Is Transformed To Lowercase.</p>
<p class="capitalize">this text capitalizes the first letter of each word.</p>
</body>
</html>
The CSS Text Transformation Property
The property covered on this page is text-transform, which controls the capitalization of text.