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.

Some language-specific case mapping rules are taken into account by this property. Let’s go through some of them:

  • In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there exist two types of i, with and without the dot, and the following two case pairings: i/İ and ı/I.
  • In German (de) languages, the ß becomes SS in uppercase.
  • In Greek (el) languages, when the whole word is uppercase (ά/Α) the vowel accent is lost, except the disjunctive eta (ή/Ή).

The browser support for the language-specific cases may vary.

The "full-width" and "full-size-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 of the text-transform property with the "uppercase" value:

<!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>

Result

The "capitalize" value

The "capitalize" value of the text-transform property capitalizes the words inside single or double quotes, as well as the first letter that comes after a hyphen. The first letter coming after a number will not be capitalized. For example, dates like “January 3th, 2019” will not become “January 3Th, 2019”. This value only capitalizes the first letters of the word, so the other letters in the word won’t change.

In the example below, we have used the "capitalize" value for the first sentence and the "lowercase" value for the second sentence:

Example of the text-transform property with the "capitalize" and “lowercase” values:

<!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>

Example of the text-transform property with the "none" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
      }
      h2 {
        text-transform: none;
      }
    </style>
  </head>
  <body>
    <h1>Example with text-transform property</h1>
    <h2>
        Example of the  text-transform property with the "none” value:
    </h2>
  </body>
</html>

Example of the text-transform property with the "initial” value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
      }
      p.text {
        text-transform: initial;
      }
    </style>
  </head>
  <body>
    <h1>Example with text-transform property</h1>
    <h2>text-transform: initial:</h2>
    <p class="text">
      Example of the text-transform property with the "initial” value:
    </p>
  </body>
</html>

Values

Value Descriptions Play it
none No capitalization effects. This is default value of this property. Play it »
capitalize Makes the first character of each word uppercase. Play it »
uppercase Makes all characters of each word uppercase. Play it »
lowercase Makes all characters of each word lowercase. Play it »
full-width Makes the writing of a character (ideograms and Latin scripts) inside a square, allowing them to be aligned in Chinese or Japanese. Play it »
full-size-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. Play it »
initial Makes the property use its default value. Play it »
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