Text Transform

text-transform changes the case of text without touching the actual HTML. You can make text uppercase, lowercase, or capitalize the first letter of each word. It is a quick way to normalize text appearance across your design.

The Four Values

There are four values: uppercase, lowercase, capitalize, and none. Each one transforms the text differently.

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

.cap {
  text-transform: capitalize;
}

.reset {
  text-transform: none;
}
    

uppercase makes every letter capital. lowercase makes every letter small. capitalize makes the first letter of each word uppercase. none removes any transformation.

Practical Uses

Text-transform is commonly used for navigation menus, section labels, and buttons. It lets you keep your HTML in a natural case while displaying it differently on screen.

.nav-link {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.section-heading {
  text-transform: capitalize;
}

/* Use with CSS counters for auto-numbered lists */
ol {
  list-style-type: none;
}

ol li::before {
  content: counter(item) ". ";
  text-transform: uppercase;
}
    

This is especially handy for localization. If your content is in multiple languages, you can use text-transform to ensure consistent casing without changing the source content.

Accessibility Note

Screen readers typically read the text as it appears in the HTML, not the visual transformation. So text-transform: uppercase does not change what the screen reader says. This is good — it means your visual styling does not interfere with assistive technology.