Usage of text-transform in CSS
The text-transform text-transform in CSS is a powerful tool for controlling how text characters are displayed in content. By using this feature, we can display text in entirely lowercase, uppercase, or with other modifications.
For example, suppose you want to show all heading texts or titles of a website in uppercase letters. Using text-transform, you can easily accomplish this task.
To apply this CSS feature, there are several options available such as: uppercase which transforms all characters to uppercase, lowercase which displays letters in lowercase, and capitalize which capitalizes the first letter of each word.
When choosing an appropriate state for your web design, consider that each of these states can have a significant impact on how well the text is understood and read; this can also help improve user experience on your site. It is always better to keep accessibility principles in mind.
Examples of CSS code with text-transform
p { <br> text-transform: uppercase;<br>}<br>
h1 { <br> text-transform: capitalize;<br>}<br>
button { <br> text-transform: lowercase;<br>}
Line by line code explanations:
p { text-transform: uppercase; }All text of the
p element will be converted to uppercase.h1 { text-transform: capitalize; }The first letter of each word in the
h1 element will be converted to uppercase.button { text-transform: lowercase; }All characters inside the
button element will be converted to lowercase.