The **`text-transform` property** changes the capitalization of the text within an element. In CSS, the `text-transform` property allows us to convert any HTML object’s text to title case, upper case, or lower case.


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

- **`capitalize`**: Transforms the first character in each word to uppercase.
- **`lowercase`**:
Transforms all characters to lowercase.
- **`none`**:
Produces no capitalization effect at all.
- **`uppercase`**:
Transforms all characters to uppercase.

# Code
The following example assigns different values of `transform-text` to different HTML elements:

.lowercase {text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

<html>
 <head>
 </head>
 <body>
 THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.
 this text will be transformed to uppercase.
 This text will be transformed to capitalize all words, including both parts of this hyphenated word: double-parked.
 </body>
</html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

What is the text-transform property in CSS?

The text-transform property in CSS modifies text capitalization, offering values like capitalize, lowercase, none, and uppercase.

What is the text-transform property in CSS?

Syntax

Code