CssHow-ToBeginner · 3 min read

How to Make Text Uppercase in CSS: Simple Guide

To make text uppercase in CSS, use the text-transform: uppercase; property on the element. This changes all the letters in the text to capital letters when displayed in the browser.

📐

Syntax

The CSS property to change text case is text-transform. To make text uppercase, set it to uppercase.

text-transform: The CSS property controlling text capitalization.
uppercase: The value that converts all letters to uppercase.

css

selector {
  text-transform: uppercase;
}

💻

Example

This example shows how to make a paragraph's text uppercase using CSS.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uppercase Text Example</title>
  <style>
    p.uppercase {
      text-transform: uppercase;
      font-size: 1.5rem;
      color: #333;
    }
  </style>
</head>
<body>
  <p class="uppercase">This text will appear in uppercase letters.</p>
</body>
</html>

Output

THIS TEXT WILL APPEAR IN UPPERCASE LETTERS.

⚠️

Common Pitfalls

Some common mistakes when using text-transform: uppercase; include:

Forgetting to apply the CSS to the correct selector or element.
Using text-transform on elements that have inline styles overriding it.
Expecting the actual text content to change in the HTML — text-transform only changes how text looks, not the source text.

css

/* Wrong: applying to a class not used in HTML */
.wrong-class {
  text-transform: uppercase;
}

/* Right: applying to the correct class */
.correct-class {
  text-transform: uppercase;
}

📊

Quick Reference

Here is a quick summary of text-transform values related to text case:

Value	Effect
uppercase	Converts all letters to uppercase
lowercase	Converts all letters to lowercase
capitalize	Capitalizes the first letter of each word
none	No change to the text case

✅

Key Takeaways

Use text-transform: uppercase; to display text in uppercase in CSS.

This property changes only the appearance, not the actual text content.

Apply the CSS rule to the correct selector to see the effect.

Other text-transform values include lowercase and capitalize.

Remember that inline styles or other CSS rules can override this property.