CssHow-ToBeginner · 3 min read

How to Set Text-Transform in CSS: Syntax and Examples

Use the text-transform property in CSS to control the capitalization of text. You can set it to values like uppercase, lowercase, or capitalize to change how text appears.

📐

Syntax

The text-transform property controls the capitalization of text in an element.

uppercase: Converts all letters to uppercase.
lowercase: Converts all letters to lowercase.
capitalize: Capitalizes the first letter of each word.
none: Leaves the text as it is (default).

css

selector {
  text-transform: value;
}

💻

Example

This example shows how to use text-transform to change text to uppercase, lowercase, and capitalized forms.

html

html {
  font-family: Arial, sans-serif;
  padding: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.none {
  text-transform: none;
}

<body>
  <p class="uppercase">This text will be uppercase.</p>
  <p class="lowercase">THIS TEXT WILL BE LOWERCASE.</p>
  <p class="capitalize">this text will be capitalized.</p>
  <p class="none">This Text Will Stay As Is.</p>
</body>

Output

This text will be uppercase. THIS TEXT WILL BE LOWERCASE. This Text Will Be Capitalized. This Text Will Stay As Is.

⚠️

Common Pitfalls

Some common mistakes when using text-transform include:

Expecting capitalize to change all letters to uppercase (it only capitalizes the first letter of each word).
Using text-transform on elements where text is generated by scripts or inputs, which may not always reflect changes.
Forgetting that text-transform only changes how text looks, not the actual text content.

css

/* Wrong: expecting capitalize to uppercase all letters */
p.example {
  text-transform: capitalize;
  /* This will NOT make all letters uppercase */
}

/* Right: use uppercase for all caps */
p.example {
  text-transform: uppercase;
}

📊

Quick Reference

Value	Effect
none	No change to the text
uppercase	All letters become uppercase
lowercase	All letters become lowercase
capitalize	First letter of each word is uppercase

✅

Key Takeaways

Use text-transform to control text capitalization in CSS.

uppercase makes all letters capital, lowercase makes all small, and capitalize capitalizes first letters of words.

text-transform changes only how text looks, not the actual text content.

Remember capitalize does not uppercase all letters, only the first letter of each word.

Apply text-transform to any text element to quickly change its case style.