CSS text-transform Property

❮ Prev Next ❯

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.