text-transform (CSS property)

Syntax

text-transform: { capitalize | lowercase | none | uppercase | inherit } ;

Description

This property controls if and how an element’s text content is capitalized.

Example

These style rules make
h1 headings use only uppercase letters, while the first
letter of each word in h2 headings will be
uppercased:

h1 {
  text-transform: uppercase;
}
h2 {
  text-transform: capitalize;
}

Value

capitalize

Transforms the first character in each word to uppercase; all other characters remain unaffected—they’re not transformed to lowercase, but will appear as written in the document

lowercase

Transforms all characters to lowercase

none

Produces no capitalization effect at all

uppercase

Transforms all characters to uppercase

Frequently Asked Questions about CSS Text Transform Property

What is the CSS text-transform property and how does it work?

The CSS text-transform property is a powerful tool that allows you to control the capitalization of text. It can be used to change the text to uppercase, lowercase, or capitalize the first letter of each word. This property works by taking the original text and transforming it based on the value you set. For example, if you set the value to ‘uppercase’, all the letters in the text will be transformed to uppercase, regardless of how they were originally typed.

How can I use the CSS text-transform property to change text to uppercase?

To change text to uppercase using the CSS text-transform property, you simply need to set the value of the property to ‘uppercase’. Here’s an example of how you can do this:

p {
text-transform: uppercase;
}
In this example, all the text within the ‘p’ element will be transformed to uppercase.

Can I use the CSS text-transform property to capitalize the first letter of each word?

Yes, you can use the CSS text-transform property to capitalize the first letter of each word. To do this, you need to set the value of the property to ‘capitalize’. Here’s an example:

h1 {
text-transform: capitalize;
}
In this example, the first letter of each word within the ‘h1’ element will be capitalized.

What is the difference between ‘uppercase’ and ‘capitalize’ in CSS text-transform?

The ‘uppercase’ value in CSS text-transform transforms all the letters in the text to uppercase, while the ‘capitalize’ value only transforms the first letter of each word to uppercase. The rest of the letters in the word will remain as they were originally typed.

Can I use the CSS text-transform property to change text to lowercase?

Yes, you can use the CSS text-transform property to change text to lowercase. To do this, you need to set the value of the property to ‘lowercase’. Here’s an example:

div {
text-transform: lowercase;
}
In this example, all the text within the ‘div’ element will be transformed to lowercase.

Is it possible to undo the effect of the CSS text-transform property?

Yes, it is possible to undo the effect of the CSS text-transform property. To do this, you need to set the value of the property to ‘none’. This will return the text to its original state, without any transformations.

Can I use the CSS text-transform property on any HTML element?

Yes, the CSS text-transform property can be used on any HTML element that contains text. This includes elements like ‘p’, ‘h1’, ‘div’, ‘span’, and many others.

Does the CSS text-transform property change the original text?

No, the CSS text-transform property does not change the original text. It only changes the way the text is displayed on the screen. The original text remains unchanged in the HTML document.

Can I use multiple values with the CSS text-transform property?

No, you can only use one value at a time with the CSS text-transform property. If you try to use multiple values, only the last value will be applied.

Is the CSS text-transform property supported in all browsers?

Yes, the CSS text-transform property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported in older versions of these browsers, so it’s always a good idea to check the browser compatibility before using this property.