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
Convert text to uppercase with CSS
To convert text to uppercase with CSS, use the text-transform property with the value uppercase. This property transforms the visual appearance of text without modifying the actual content.
Syntax
text-transform: uppercase;
Example
Here's how to convert text to uppercase using CSS:
<html>
<head>
<style>
.uppercase-text {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>Normal Text</p>
<p class="uppercase-text">
This text will be displayed in uppercase!
</p>
<p style="text-transform: uppercase;">
Inline style uppercase text
</p>
</body>
</html>
Output
Normal Text THIS TEXT WILL BE DISPLAYED IN UPPERCASE! INLINE STYLE UPPERCASE TEXT
Other text-transform Values
The text-transform property accepts several values:
| Value | Description | Example Result |
|---|---|---|
uppercase |
Converts all text to uppercase | HELLO WORLD |
lowercase |
Converts all text to lowercase | hello world |
capitalize |
Capitalizes first letter of each word | Hello World |
none |
No transformation (default) | Hello World |
Key Points
- The
text-transformproperty only affects visual display, not the actual text content - Screen readers will read the original text, not the transformed version
- Works with all text elements including headings, paragraphs, and spans
- Can be applied via inline styles, CSS classes, or ID selectors
Conclusion
Use text-transform: uppercase to visually convert text to uppercase in CSS. This approach maintains the original text content while changing only its display appearance.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements