CSS `text-transform`: Controlling Text Case for Enhanced Web Design

Master text styling in CSS using the `text-transform` property. This tutorial explains how to easily convert text to uppercase, lowercase, or capitalize the first letter of each word, providing techniques to enhance the visual appeal and consistency of your web page text.

Controlling Text Case with CSS `text-transform`

What is `text-transform`?

The CSS `text-transform` property changes the case (uppercase, lowercase, or capitalized) of text within an element. It affects the visual presentation of the text, not its underlying value. This is useful for stylistic purposes or for ensuring consistent capitalization throughout your website.

`text-transform` Property Values

The `text-transform` property accepts the following values:

  • capitalize: Capitalizes the first letter of each word.
  • uppercase: Converts all letters to uppercase.
  • lowercase: Converts all letters to lowercase.
  • none: (Default) No case transformation.
  • initial: Resets the property to its default value (none).
  • inherit: Inherits the value from its parent element.

The syntax is: text-transform: capitalize | uppercase | lowercase | none | initial | inherit;

`text-transform` Examples

`capitalize`

CSS Code

text-transform: capitalize;

This will capitalize the first letter of each word (e.g., "hello world" becomes "Hello World"). Existing capitalization is preserved; it doesn't force lowercase for words that already start with a capital letter. It does not capitalize the first letter after a number.

`uppercase`

CSS Code

text-transform: uppercase;

This converts all letters to uppercase (e.g., "hello world" becomes "HELLO WORLD").

`lowercase`

CSS Code

text-transform: lowercase;

This converts all letters to lowercase (e.g., "HELLO WORLD" becomes "hello world").

`none`

CSS Code

text-transform: none;

This leaves the text case as it is written in the HTML.