The Transform Property in CSS

The text-transform property controls the capitalization of text without changing the actual HTML content.

Values

/* UPPERCASE — all letters capitalized */
.uppercase { text-transform: uppercase; }

/* lowercase — all letters lowercased */
.lowercase { text-transform: lowercase; }

/* Capitalize — first letter of each word */
.capitalize { text-transform: capitalize; }

/* None — no transformation (default) */
.normal { text-transform: none; }

Examples in Action

<p class="uppercase">hello world</p>
<!-- Displays: HELLO WORLD -->

<p class="lowercase">Hello World</p>
<!-- Displays: hello world -->

<p class="capitalize">hello world</p>
<!-- Displays: Hello World -->

Practical Uses

/* Navigation labels — always uppercase */
nav a {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* Button text */
.btn {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Headings */
h1, h2 {
    text-transform: capitalize;
}

Why Use text-transform?

• Keep HTML content normal-case for accessibility and SEO
• Visual transformations should be in CSS, not HTML
• Easy to change — just update the CSS instead of editing all the HTML