bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Text Transformation

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind CSS Text Transformation?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

p.___ {
3Order

Put the learning moves in the order that makes the concept easiest to apply.

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

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

Formatted code
p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

Live preview

The CSS Text Transformation Property

PropertyDescription
text-transformControls the capitalization of text

Previous

CSS Text Decoration Styles

Next

CSS Text Spacing