text-transform

by

The text-transform property in CSS is used to manipulate the casing of text within an element. It allows you to convert text to uppercase, lowercase, capitalize (first letter of each word), or leave it unchanged.

Syntax

text-transform: value;

Values

  • uppercase: Converts all text to uppercase.
  • lowercase: Converts all text to lowercase.
  • capitalize: Capitalizes the first letter of each word.
  • none: Applies no transformation (default).
  • inherit: Inherits the text-transform value from the parent element.

Example

<p>This is a paragraph with different text transformations.</p>
<p class="uppercase">This text is in uppercase.</p>
<p class="lowercase">This text is in lowercase.</p>
<p class="capitalize">This text is in capitalize.</p>
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

Additional Notes

  • text-transform is applied to the entire content of an element, including any child elements.
  • It doesn’t affect the original text content, only the displayed text.

Example with different text transformations

<p>This is a paragraph with mixed case text.</p>
<p class="uppercase">THIS IS A PARAGRAPH WITH MIXED CASE TEXT.</p>
<p class="lowercase">this is a paragraph with mixed case text.</p>
<p class="capitalize">This Is A Paragraph With Mixed Case Text.</p>