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) language, the ß becomes SS in uppercase.
In Greek (el) language, 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.

Warning

The full-width and full-size-kana values are experimental. full-width has partial WebKit support, while full-size-kana has very limited support.

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

Syntax of CSS text-transform Property

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

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

Example of CSS text-transform Property with 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:

Example of CSS text-transform Property with 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:

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:

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.

Practice

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

text-transform:capitalize
text-transform:uppercase
text:capitalize