CSS text-transform attribute

Definition and Usage

The text-transform property controls the case of text.

Description

This property changes the case of letters in an element regardless of the case of the text in the source document. If the value is "capitalize", some letters should be capitalized, but it does not define how to determine which letters to capitalize, which depends on how the user agent identifies each "word".

See also:

CSS Tutorial:CSS Text

HTML DOM Reference Manual:textTransform Property

Example

Transform text in different elements:

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

Try it yourself

Tips and Notes

Note:Different user agents may use different methods to determine where a word starts, and accordingly determine which letters should be capitalized. For example, the text "w3-school" can be displayed in two ways: "W3-school" and "W3-School". CSS does not specify which one is correct, so both are acceptable.

CSS Syntax

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Property Value

Value Description
none Default. Defines standard text with lowercase and uppercase letters.
capitalize Each word in the text starts with an uppercase letter.
uppercase Defines only uppercase letters.
lowercase Defines no uppercase letters, only lowercase letters.
inherit Specifies that the value of the text-transform property should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: yes
Version: CSS1
JavaScript Syntax: object

More examples

Control the case of letters in text
This example demonstrates how to control the case of letters in text.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0