CSS text-transform Property
Description
The text-transform
property specifies the case of an elements text. This property can transform text to uppercase, lowercase or capitalize each word in a sentence.
- Initial value
- none
- Applies to
- All elements
- Inherited
- Yes
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.textTransform
Syntax
text-transform: none | capitalize | uppercase | lowercase | full-width
Values
- noneWill not change any text
- capitalizeWill make the first letter of each word a capital letter
- uppercaseWill transform all letters to uppercase
- lowercaseWill transform all letters to lowercase
- inherit
Example
<p class="test">The quick brown fox jumps over the lazy dog.</p>
<p class="test2">The quick brown fox jumps over the lazy dog.</p>
<p class="test3">The quick brown fox jumps over the lazy dog.</p>
.test {
text-transform: capitalize;
}
.test2 {
text-transform: uppercase;
}
.test3 {
text-transform: lowercase;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
4 | 12 | 1 | 1 | 7 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | 11 | 1 | 1.0 |
Last updated by CSSPortal on: 3rd November 2019