Transform Text with the CSS text-transform Property

The text-transform property in CSS changes the case of the text in any selector that it's applied to, allowing you to change text case on the fly without the need to make manual text changes throughout your code.

The text-transform property comes equipped with six different options:

• capitalize
• uppercase
• lowercase
• none
• inherit
• initial

We'll cover each option and apply them in real-world scenarios where you can use them most effectively.

Capitalize

The capitalize option is one of the most useful and necessary options available, transforming your text into title case where the first letter of each word is a capital letter, and the rest are lowercase.

This provides a quick and easy solution when accepting user input for data including names, addresses, cities, states, or anything else representing the name or title of something, requiring each word to have the first letter capitalized.

We'll apply this rule to an h2 element to see the results:

h2 {
	text-transform: uppercase;
}

<h2>Learn with Orangeable</h2>
// Learn With Orangeable

Uppercase

The uppercase option will transform your text case to all uppercase letters. You could use this option for styling table headers or any text on the screen that you want to emphasize clearly:

text-transform: uppercase;
// LEARN WITH ORANGEABLE

Lowercase

The lowercase option will transform all the contained text to lowercase letters, which are great for setting page slugs or verbiage with little importance:

text-transform: lowercase;
// learn with orangeable

None

Setting the text-transform property to none instructs the browser to make no change to the element's case, leaving all contained text as-is.

Sometimes, this can be helpful to override styling from parent elements, especially when using other CSS frameworks, like Bootstrap.

text-transform: none;
// Learn with Orangeable

Inherit

Using the inherit option allows a child element to adopt its parent element's value.

In this example, both the header element and its associated child h2 heading tag will apply the capitalize case:

header {
	text-transform: capitalize;
}

header h2 {
	text-transform: inherit;
}

Initial

In CSS, the initial value refers to the default value of an element. Since the default value for text-transform is none, the element will apply that value automatically:

text-transform: initial;
// Learn with Orangeable

Conclusion

text-transform has been around in CSS for a long time, so you don't need to worry about a lack of support for this property in any modern browsers, including older versions of IE6 and higher.