CSS Convert Text to Lowercase
To convert text to lowercase in HTML Element(s) using CSS, assign text-transform
CSS property with the value lowercase
for the HTML Element(s).
The syntax to set text-transform
property for the HTML Element is
text-transform: lowercase;
Examples
Transform Text in Paragraph to Lowercase
In the following example, we convert the text in the paragraph element with id p1
to lowercase.
Example
<!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 Element.</p> </body> </html>
Transform Text in Heading, Anchor Text to Lowercase
In the following example, we convert the text in the heading, and anchor text, to lowercase.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #h1_1 { text-transform: lowercase; } #a1 { text-transform: lowercase; } </style> </head> <body> <h1 id="h1_1">My Heading - HELLO</h1> <a id="a1">This is a paragraph.</a> </body> </html>
Conclusion
In this CSS Tutorial, we learned how to transform text in HTML Element(s) to lowercase alphabets using CSS.