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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { text-transform: capitalize; } </style> </head> <body> <p id="p1">this is a paragraph.</p> </body> </html>
text-transform uppercase
In the following example, we set all characters to uppercase, using text-transform property.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { text-transform: uppercase; } </style> </head> <body> <p id="p1">this is a paragraph.</p> </body> </html>
text-transform lowercase
In the following example, we set all characters to lowercase, using text-transform property.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { text-transform: lowercase; } </style> </head> <body> <p id="p1">This is a paragraph.</p> </body> </html>
text-transform none
In the following example, we set text-transform property with none for the paragraph HTML Element.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { text-transform: none; } </style> </head> <body> <p id="p1">This is a paragraph.</p> </body> </html>
Conclusion
In this CSS Tutorial, we learned about text-transform property, and how to use this property for HTML Elements, with examples.