text-transform

Summary

This property transforms text for styling purposes. (It has no effect on the underlying content.)

Overview table

Initial value: none
Applies to: All elements
Inherited: Yes
Media: visual
Computed value: as specified
Animatable: No

CSS Object Model Property
:

Percentages: no

Syntax

text-transform: capitalize
text-transform: full-width
text-transform: lowercase
text-transform: none
text-transform: uppercase

Values

none: Default. Text is not transformed.
capitalize: Transforms the first character of each word to uppercase.
uppercase: Transforms all the characters to uppercase.
lowercase: Transforms all the characters to lowercase.
full-width: Puts all characters in fullwidth form. If the character does not have a corresponding fullwidth form, it is left as is. This value is typically used to typeset Latin characters and digits like ideographic characters.

Examples

Examples using different values for text-transform

/*
    - text-transform property examples
    - explanations inline
*/

body {
    padding:50px;
    font-size:22px;
}

.text--uppercase {
    text-transform:uppercase; /* all uppercase characters */
}

.text--lowercase{
    text-transform: lowercase; /* all lowercase characters */
}

.text--capitalize{
    text-transform: capitalize; /* _first_ letter of each word is capitalized  */
}

.text--no-transform {
    text-transform: none; /* disables any other inherited text-transform */
}

View live example

Using text-transform also works on greek or german letters

/*
    - text-transform property examples
    - explanations inline
*/

body {
    padding:50px;
    font-size:22px;
}

.text--uppercase {
    text-transform:uppercase; /* works on non-latin characters as well */
}

View live example

Notes

When using text-transform: capitalize; authors should not expect capitalize to follow language-specific titlecasing conventions (such as skipping articles in English).

Related specifications

CSS Text Module Level 3: W3C Last Call Working Draft

Attributions

Mozilla Developer Network .
Microsoft Developer Network: [Windows Internet Explorer API reference Article]