X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS text-transform Property

The text-transform property is used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

The text-transform property emphasizes language-specific case mapping rules.

The "full-width" and "full-width-kana" values are experimental and not yet supported by any browser.

Initial Value none
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.textTransform = "capitalize";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p{
      text-transform:uppercase;
      }
    </style>
  </head>
  <body>
    <h2>Text-transform property example</h2>
    <p>This is some paragraph.</p>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div>
  </body>
</html>

Here is another example where the first sentence is defined as "capitalize" and the second sentence is defined as "lowercase":

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .a {text-transform:capitalize}
      .b {text-transform:lowercase}
    </style>
  </head>
  <body>
    <h2>Text-transform property example</h2>
    <div class="a">"Text transform property"</div>
    </br>
    <div class="b">"THIS IS SOME PARAGRAPH FOR EXAMPLE".</div>
  </body>
</html>

Values

Value Descriptions
none No capitalization effects. This is default value of this property.
capitalize Makes the first character of each word uppercase.
uppercase Makes all characters of each word uppercase.
lowercase Makes all characters of each word lowercase.
full-width Makes the writing of a character (ideograms and Latin scripts) inside a square, allowing them to be aligned in Chinese or Japanese.
full-width-kana Converts all small Kana characters to the full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Practice Your Knowledge

How do you make each word in a text start with a capital letter?



Do you find this helpful?

Related articles