CSS text-transform Property

The text-transform property in CSS is used to change the capitalization style of text. It helps improve the presentation and formatting of webpage content.

• It can convert text to uppercase, lowercase, or capitalize.
• It changes only the display of text, not the original content.
• The property helps maintain consistent text styling across a webpage.

Syntax

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

Property Values

Here are the property values for the text-transform CSS property:

CSS text-transform Property Example

Here are some examples of the CSS text-transform property that will help you clearly understand how it works:

Example 1: Using text-transform: none;

Here, we are using the text-transform: none; property to display text in its original form without any capitalization changes. It demonstrates the default text transformation behavior in a paragraph.

Example 2: Using text-transform: capitalize;

Here, we are using the text-transform: capitalize; property to transform the first letter of each word to uppercase. It demonstrates this effect on paragraphs styled with the gfg class.

Example 3: Using text-transform: uppercase;

Here, we are using text-transform: uppercase; property to convert all characters in the paragraphs with the gfg class to uppercase. The heading remains in its original form.

Example 4: Using text-transform: lowercase;

Here, we are using text-transform: lowercase; property to convert all characters in the paragraphs with the gfg class to lowercase. The headings remain in their original form.

Example 5: Using text-transform: initial;

Here, we are using the the text-transform: initial; property to set the text transformation to its default value for paragraphs with the gfg class. The headings remain unchanged.