Text Transform

CSS Text Transform

The CSS text-transform property controls the capitalization used when text is displayed. It can convert text to uppercase or lowercase, capitalize words, or leave the original capitalization unchanged.

The text-transform Property

The CSS text-transform property changes how capitalization is displayed without requiring the text in the HTML document to be rewritten.

p {
  text-transform: uppercase;
}

This rule displays paragraph text using uppercase letters.

Uppercase Text

The uppercase value displays letters using their uppercase forms.

h2 {
  text-transform: uppercase;
}

Uppercase can be useful for short headings, labels, navigation items, or other text where the design calls for capital letters.

Lowercase Text

The lowercase value displays letters using their lowercase forms.

p {
  text-transform: lowercase;
}

The source text can contain uppercase letters while CSS displays them as lowercase.

Capitalized Text

The capitalize value converts the first letter of each word to uppercase when the text is displayed. It does not force the remaining letters in each word to lowercase.

h2 {
  text-transform: capitalize;
}

This value can be useful for certain headings or labels, but it should not be relied on to create grammatically correct title capitalization.

The none Value

The none value leaves the capitalization unchanged and displays the text according to its original capitalization.

p {
  text-transform: none;
}

This is the initial value of the text-transform property and can also be used to override a transformation inherited from a parent element.

Try Different Text Transformations

Edit the text-transform values in the example to compare uppercase, lowercase, capitalized, and unchanged text.

The Original Text Does Not Change

The text-transform property changes the visual presentation of text rather than rewriting the characters stored in the HTML document.

<p class="example">Hello World</p>

.example {
  text-transform: uppercase;
}

The browser displays the text as HELLO WORLD, but the HTML source still contains Hello World.

This separation allows HTML to contain the intended text while CSS controls how its capitalization appears visually.

Text Transform and Inheritance

The text-transform property is inherited. Descendant elements generally use the transformation applied to their parent unless another CSS rule specifies a different value.

section {
  text-transform: uppercase;
}

section p {
  text-transform: none;
}

Text in the section is displayed in uppercase, while paragraph text keeps its original capitalization because the paragraphs use text-transform: none;.

When to Use Text Transform

Text transformation is useful when capitalization is part of the visual design rather than the meaning of the content. For example, a navigation menu or short heading can be displayed in uppercase while the HTML remains written normally.

Avoid using long passages of uppercase text simply for emphasis because large blocks of capital letters can be harder to read. Use appropriate HTML elements when the content itself requires emphasis or importance.

Summary

The CSS text-transform property controls how capitalization is displayed. The commonly used values uppercase, lowercase, capitalize, and none change the visual presentation without rewriting the original HTML text.

The next tutorial covers Letter Spacing and how CSS controls the horizontal space between characters.