Open Playground
CSS TutorialLesson #43

Text Transformation

The CSS `text-transform` property is used to

The CSS text-transform property is used to control the capitalization of text in an element.

It can be used to transform a text into uppercase or lowercase letters, or capitalize the first letter of each word, without changing the original content in HTML.

This property can have one of the following values:

  • none - No transformation. Text renders as it is
  • capitalize - Transforms the first character of each word to uppercase
  • uppercase - Transforms all characters to uppercase
  • lowercase - Transforms all characters to lowercase

Example

Example Code

css
Try it Yourself
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

The CSS Text Transformation Property

PropertyDescription
text-transformControls the capitalization of text

Interactive Code Examples

CSS Example 1

css
Try it Yourself
Interactive runnable CSS example from EA Academy.
Live Output Preview: