Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Text Transformation using CSS
The CSS text-transform property is used to control the capitalization of text content. You can transform text to uppercase, lowercase, capitalize the first letter of each word, or leave it unchanged.
Syntax
selector {
text-transform: value;
}
Possible Values
| Value | Description |
|---|---|
none |
No transformation (default) |
capitalize |
Capitalizes the first letter of each word |
uppercase |
Transforms all text to uppercase |
lowercase |
Transforms all text to lowercase |
initial |
Sets to default value |
inherit |
Inherits from parent element |
Example 1: Uppercase Transformation
The following example transforms all text to uppercase −
<!DOCTYPE html>
<html>
<head>
<style>
.uppercase-text {
text-transform: uppercase;
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="uppercase-text">
<p>This is demo text.<br>
This is another demo text.</p>
</div>
</body>
</html>
The text "This is demo text. This is another demo text." appears in uppercase: "THIS IS DEMO TEXT. THIS IS ANOTHER DEMO TEXT."
Example 2: Lowercase Transformation
The following example transforms all text to lowercase −
<!DOCTYPE html>
<html>
<head>
<style>
.lowercase-text {
text-transform: lowercase;
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="lowercase-text">
<p>THIS is demo text.<br>
This is ANOTHER demo text.</p>
</div>
</body>
</html>
The text "THIS is demo text. This is ANOTHER demo text." appears in lowercase: "this is demo text. this is another demo text."
Example 3: Capitalize Transformation
The following example capitalizes the first letter of each word −
<!DOCTYPE html>
<html>
<head>
<style>
.capitalize-text {
text-transform: capitalize;
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="capitalize-text">
<p>this is demo text.<br>
this is another demo text.</p>
</div>
</body>
</html>
The text "this is demo text. this is another demo text." appears with each word capitalized: "This Is Demo Text. This Is Another Demo Text."
Conclusion
The text-transform property provides an easy way to control text capitalization without changing the original content. It's particularly useful for headings, navigation menus, and consistent text formatting across a website.
Updated on: 2026-03-15T13:43:13+05:30
111 Views
Advertisements