Mastering CSS Text-Transform Property: Uppercase, Lowercase, Capitalize and None

Welcome to our tutorial on the CSS text-transform property. This powerful tool allows you to control the capitalization of text directly from your stylesheet, without having to manually adjust your HTML content. Let’s dive in!

What is the text-transform Property?

The text-transform property in CSS is used to change the appearance of text in an HTML document. It can make all letters uppercase or lowercase, capitalize each word, or leave the text as it is.

Uppercase

To transform all your text into uppercase letters regardless of how they were initially typed in your HTML document, use text-transform: uppercase;. Here’s an example:

<style>
  p {
    text-transform: uppercase;
  }
</style>

<p>This will be displayed in uppercase.</p>

Lowercase

If you want all your text to appear in lowercase letters only, use text-transform: lowercase;. Here’s how:

<style>
  p {
    text-transform: lowercase;
  }
</style>

<p>THIS WILL BE DISPLAYED IN LOWERCASE.</p>

Capitalize

To capitalize the first letter of each word in a sentence or phrase (also known as title case), use text-transform: capitalize;. Check out this example:

<style>
  p {
    text-transform: capitalize;
  }
</style>

<p>this will be displayed in title case.</p>

None

If you want to override any previous text-transform properties and display the text as it was originally typed, use text-transform: none;. Here’s an example:

<style>
  p {
    text-transform: none;
  }
</style>

<p>This Will Be Displayed As It Was Typed.</p>

Conclusion

The CSS text-transform property is a simple yet powerful tool that can help you maintain consistency and improve readability across your website. Remember, though, that it only changes how the text appears – not the actual content of your HTML document.

We hope this tutorial has been helpful. Happy coding!