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
Capitalize text with CSS
To capitalize text in CSS, use the text-transform property with the capitalize value. This property transforms the first letter of each word to uppercase while keeping the rest lowercase.
Syntax
text-transform: capitalize;
Basic Example
Here's how to capitalize text using CSS:
<html>
<head>
</head>
<body>
<p style="text-transform: capitalize;">
hello world from india
</p>
</body>
</html>
Hello World From India
Different Text Transform Options
The text-transform property supports several values for different text transformations:
<html>
<head>
<style>
.capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.none { text-transform: none; }
</style>
</head>
<body>
<p class="capitalize">capitalize example text</p>
<p class="uppercase">uppercase example text</p>
<p class="lowercase">LOWERCASE Example TEXT</p>
<p class="none">No Transform Applied</p>
</body>
</html>
Capitalize Example Text UPPERCASE EXAMPLE TEXT lowercase example text No Transform Applied
Comparison of Text Transform Values
| Value | Effect | Example Input | Example Output |
|---|---|---|---|
capitalize |
First letter of each word uppercase | hello world | Hello World |
uppercase |
All letters uppercase | hello world | HELLO WORLD |
lowercase |
All letters lowercase | HELLO World | hello world |
none |
No transformation | Hello WoRLd | Hello WoRLd |
Practical Use Case
Capitalize is commonly used for headings, names, and titles:
<html>
<head>
<style>
.heading {
text-transform: capitalize;
font-size: 24px;
color: #333;
}
.name {
text-transform: capitalize;
font-weight: bold;
}
</style>
</head>
<body>
<h2 class="heading">welcome to our website</h2>
<p>Author: <span class="name">john doe smith</span></p>
</body>
</html>
Welcome To Our Website Author: John Doe Smith
Conclusion
Use text-transform: capitalize to automatically capitalize the first letter of each word in your text. This CSS property provides an easy way to format text without modifying the original content.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements