CSS/Properties/text-transform

From Web Education Community Group
Jump to: navigation, search

text-transform

The text-transform property controls capitalization effects of an element's text.

Description

Values capitalize | uppercase | lowercase | none | inherit
Initial value none
Applies to All elements
Inherited Yes


Values

  • capitalize
    Puts the first character of each word in uppercase; other characters are unaffected.


  • uppercase
    Puts all characters of each word in uppercase.


  • lowercase
    Puts all characters of each word in lowercase.


  • none
    No capitalization effects.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

p#no{ text-transform: none; }
p#cap{ text-transform: capitalize; }
p#up{ text-transform: uppercase; }
p#low{ text-transform: lowercase; }

[index.html]

<body>
  <p id="no">This is a paragraph(none)</p>
  <p id="cap">This is a paragraph(capitalize)</p>
  <p id="up">This is a paragraph(uppercase)</p>
  <p id="low">This is a paragraph(lowercase)</p>
</body>

Csslist2 text-transform.png

CSS Reference

The CSS specification defines the text-transform property in 16.5 Capitalization.