CSS text-transform Property
CSS text-transform property sets the capitalization of the text in HTML Element(s).
The syntax to specify a value for text-transform property is
text-transform: value;
The following table gives the possible values that could be given to text-transform property.
| Value | Description | Examples |
|---|---|---|
| none | No capitalization. | text-transform: none; |
| capitalize | Converts the first character of each word to uppercase. | text-transform: capitalize; |
| uppercase | Converts all character in text to uppercase. | text-transform: uppercase; |
| lowercase | Converts all character in text to lowercase. | text-transform: lowercase; |
| initial | Sets text-transform to default value. | text-transform: initial; |
| inherit | Inherits text-transform value from its parent element. | text-transform: inherit; |
Examples
In the following examples, we transform the text in HTML Element(s), in terms of case, using text-transform property.
text-transform: capitalize;
In the following example, we set the first character of each word to uppercase, using text-transform property.
index.html
text-transform: uppercase;
In the following example, we set all characters to uppercase, using text-transform property.
index.html
text-transform: lowercase;
In the following example, we set all characters to lowercase, using text-transform property.
index.html
text-transform: none;
In the following example, we set text-transform property with none for the paragraph HTML Element.
index.html
Conclusion
In this CSS Tutorial, we learned about text-transform property, and how to use this property for HTML Elements, with examples.