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.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
4121171
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
11841111.0

Last updated by CSSPortal on: 3rd November 2019