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
How to change the cases of text in paragraph using CSS?
The CSS text-transform property is used to control the capitalization of text in HTML elements. It provides an easy way to change text case without modifying the actual content in your HTML.
Syntax
selector {
text-transform: value;
}
Possible Values
| Value | Description |
|---|---|
capitalize |
Capitalizes the first letter of each word |
uppercase |
Converts all text to uppercase letters |
lowercase |
Converts all text to lowercase letters |
none |
No transformation (default value) |
Example: Text Case Transformations
The following example demonstrates all three text transformation values applied to different paragraphs
<!DOCTYPE html>
<html>
<head>
<style>
.capitalize {
text-transform: capitalize;
color: blue;
margin: 10px 0;
}
.uppercase {
text-transform: uppercase;
color: red;
margin: 10px 0;
}
.lowercase {
text-transform: lowercase;
color: green;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Text Case Transformation Examples</h2>
<p class="capitalize">this text will have each word capitalized</p>
<p class="uppercase">This Text Will Be All Uppercase</p>
<p class="lowercase">THIS TEXT WILL BE ALL LOWERCASE</p>
</body>
</html>
Three paragraphs appear with different text transformations: - Blue text: "This Text Will Have Each Word Capitalized" - Red text: "THIS TEXT WILL BE ALL UPPERCASE" - Green text: "this text will be all lowercase"
Conclusion
The text-transform property provides a simple way to change text case in CSS. Use capitalize for title case, uppercase for all caps, and lowercase for all lowercase text formatting.
Updated on: 2026-03-15T16:19:17+05:30
782 Views
Advertisements