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 Working with CSS
The CSS text-transform property allows us to control the capitalization and casing of text content. It can transform text to uppercase, lowercase, capitalize words, or leave it unchanged.
Syntax
selector {
text-transform: value;
}
Possible Values
| Value | Description |
|---|---|
uppercase |
Transforms all text to uppercase letters |
lowercase |
Transforms all text to lowercase letters |
capitalize |
Capitalizes the first letter of each word |
none |
No transformation (default value) |
Example 1: Basic Text Transformations
The following example demonstrates uppercase, lowercase, and capitalize transformations −
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-transform: uppercase;
color: #333;
}
.demo {
text-transform: lowercase;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
q {
text-transform: capitalize;
font-style: italic;
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>WordPress</h2>
<q>WordPress is open source software you can use to create a beautiful website, blog, or app.</q>
<p class="demo">34% of the web uses WordPress, from hobby blogs to the biggest news sites online.</p>
</body>
</html>
The heading "WORDPRESS" appears in uppercase. The quote text shows "WordPress Is Open Source Software You Can Use To Create A Beautiful Website, Blog, Or App." with each word capitalized. The paragraph text appears in all lowercase: "34% of the web uses wordpress, from hobby blogs to the biggest news sites online."
Example 2: Multiple Transformations
This example shows different text transformations applied to various elements −
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgreen;
margin: 20px auto;
text-align: center;
padding: 20px;
max-width: 600px;
}
.uppercase-text {
background-color: aquamarine;
text-transform: uppercase;
padding: 15px;
margin: 10px 0;
}
.lowercase-text {
background-color: darksalmon;
text-transform: lowercase;
padding: 15px;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>What is Magento?</h2>
<div>
<p class="uppercase-text">Magento is an open-source e-commerce platform written in PHP.</p>
<div class="lowercase-text">
Build your own branded store powered by Magento Commerce and Amazon. Choose from 4,600 themes and extensions in the Magento Marketplace.
</div>
</div>
</body>
</html>
A centered layout appears with: - An aquamarine box containing "MAGENTO IS AN OPEN-SOURCE E-COMMERCE PLATFORM WRITTEN IN PHP." in uppercase - A darksalmon box containing "build your own branded store powered by magento commerce and amazon. choose from 4,600 themes and extensions in the magento marketplace." in lowercase
Conclusion
The text-transform property provides an easy way to control text casing without modifying the HTML content. It's particularly useful for headings, navigation menus, and maintaining consistent text formatting across your website.
Updated on: 2026-03-15T14:11:16+05:30
208 Views
Advertisements