CSS Examples

How to Transform a Text to Uppercase or Lowercase using CSS

In this example, we will learn how to transform a text to uppercase or lowercase using CSS. We can use the text-transform property where the text-transform: uppercase transforms the text to uppercase and the text-transform: lowercase transforms the text to lowercase.

Prerequisites

CSS text-transform property

Example

HTML

        <span class="uppercase">Make this all uppercase</span>
        <span class="lowercase">Make this all lowercase</span>

CSS

        .uppercase{
            text-transform: uppercase;
        }

        .lowercase{
            text-transform: lowercase;
        }

Output

How to Transform a Text to Uppercase or Lowercase using CSS

Here, we transformed a text to uppercase using text-transform:: uppercase and transformed another text to lowercase using text-transform: lowercase

Conclusion

In this example, we learned how to transform a text to uppercase or lowercase using CSS. We used the text-transform property and applied text-transform: uppercase to transform the text to uppercase and applied text-transform: lowercase to transform the text to lowercase.