CSS Property text-transform








text-transform changes the case of letters in an element.

Summary

ItemValue
Initial value none
Inherited Yes.
Version CSS1
JavaScript syntax object.style.textTransform="uppercase"
Applies to All elements.

CSS Syntax

text-transform: capitalize | lowercase | none | uppercase




Property Values

The property values are listed in the following table.

Value Description
none No capitalization. Default value
capitalize uppercase the first character of each word
uppercase uppercase all characters
lowercase lowercase all characters
inherit inherit the text-transform property from the parent element

Browser compatibility

text-transform Yes Yes Yes Yes Yes




Example

An example showing how to use text-transform CSS property.

<!DOCTYPE HTML>
<html>
<head>
<style>
p {<!-- w  w w.  ja  va 2  s .c  om-->
    padding: 5px 25px;
    background: mistyrose;
    border: 1px solid orange;
}
span.lower {
    text-transform: lowercase;
}
span.upper {
    text-transform: uppercase;
}
span.capitalize {
    text-transform: capitalize;
}
span.example {
    background: pink;
}
</style>
</head>
<body>
  <p>
   <span class='lower example'>UPPERCASE TEXT LOWERCASE</span> 
   <span class='upper example'>lowercase text uppercase</span>
   <span class='capitalize example'>capitalize every word.</span>.
  </p>
</body>
</html>

Click to view the demo