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
4	12	1	1	7	1
Tablets / Mobile
1	18	4	11	1	1.0

Last updated by CSSPortal on: 3rd November 2019