text-transform

The text-transform property changes the capitalization of text. Values include uppercase, lowercase, capitalize, and none. It's useful for styling but doesn't affect the actual HTML content.

Text Transform Values

Value	Effect	Example
none	No change	Hello World
uppercase	All caps	HELLO WORLD
lowercase	All lowercase	hello world
capitalize	First letter caps	Hello World

CSS

/* Uppercase */
.button {
  text-transform: uppercase;
  /* CLICK ME */
}

/* Lowercase */
.email {
  text-transform: lowercase;
  /* user@example.com */
}

/* Capitalize */
.title {
  text-transform: capitalize;
  /* First Letter Capitalized */
}

/* Remove transformation */
.normal {
  text-transform: none;
}

Practical Examples

CSS

/* Menu items in caps */
nav a {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

/* Section titles */
h2 {
  text-transform: capitalize;
  font-weight: bold;
}

/* Badges in uppercase */
.badge {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
}

Note

Text-transform changes display only, not actual HTML content. Useful for styling without changing HTML. Choose based on design needs.

Letter spacing: [letter-spacing & word-spacing](/css/letter-spacing).