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
Usage of text-transform property in CSS
The text-transform property in CSS is used to control the capitalization of text content. It allows you to transform text to uppercase, lowercase, capitalize first letters, or leave it unchanged.
Syntax
text-transform: value;
Property Values
| Value | Description |
|---|---|
none |
No transformation (default) |
capitalize |
Capitalizes the first letter of each word |
uppercase |
Converts all text to uppercase |
lowercase |
Converts all text to lowercase |
Example
<html>
<head>
<title>Text Transform Example</title>
</head>
<body>
<p style="text-transform:capitalize;">
this will be capitalized
</p>
<p style="text-transform:uppercase;">
this will be in uppercase
</p>
<p style="text-transform:lowercase;">
THIS WILL BE IN LOWERCASE
</p>
<p style="text-transform:none;">
This Text Remains Unchanged
</p>
</body>
</html>
Output
This Will Be Capitalized THIS WILL BE IN UPPERCASE this will be in lowercase This Text Remains Unchanged
CSS Class Example
<html>
<head>
<style>
.title { text-transform: uppercase; }
.subtitle { text-transform: capitalize; }
.content { text-transform: lowercase; }
</style>
</head>
<body>
<h1 class="title">main heading</h1>
<h2 class="subtitle">section title here</h2>
<p class="content">SOME PARAGRAPH TEXT</p>
</body>
</html>
Output
MAIN HEADING Section Title Here some paragraph text
Common Use Cases
The text-transform property is commonly used for styling headings, navigation menus, buttons, and form labels to maintain consistent text formatting across a website.
Conclusion
The text-transform property provides an efficient way to control text capitalization in CSS. Use capitalize for titles, uppercase for emphasis, and lowercase for uniform styling.
Updated on: 2026-03-15T23:18:59+05:30
171 Views
Advertisements