CSS’s text-transform property offers a simple way to change the case of your text. It’s a small but helpful tool that’ll make sure you never have to worry about hard-coding text in a specific case. Here we’ll take a look at all your text-transform options and some examples of when you’d use them.

The text-transform property has six main values:

capitalize

uppercase

lowercase

none

initial

inherit

It can be applied to any CSS selector and will update the text case of any elements it is applied to.

Capitalize

h4 {

text-transform: uppercase;

}

In this case, all h4 elements will be converted to uppercase. For example, let’s take an h4 element with no other styling applied to it:

Learning with Alligator.io

WITHOUT the text-transform property, we’ll get this:

Learning with Alligator.io

To transform this text, we can apply the CSS block SHOWN above and get this instead:

LEARNING WITH ALLIGATOR.IO

Since we declared uppercase as our text-transform value, our entire string value for the h4 element is converted to uppercase. It’s as easy as that!

Using the value capitalize is the one option that may show some differences across browsers. This is because determining the first “LETTER” for each word in a string has some discrepancies between browsers. Symbols, like @ for example, may be considered a letter in one browser but not another.

This issue doesn't happen with the other values because the letters are EITHER all uppercase or all lowercase; the position of the letters doesn't matter.

Now let’s take a look at the other values and how they transform our h4 element.

Lowercase

h4 {

text-transform: lowercase;

}

learning with alligator.io

Capitalize

h4 {

text-transform: capitalize;

}

Learning With Alligator.Io

None

h4 {

text-transform: none;

}

Learning with Alligator.io

If you’re wondering if anything is different with this one, it’s not! none will not change your text’s original case. You can use none to override other styling. For example, if you’re using a CSS framework (like BOOTSTRAP), you could override its default CSS settings with none.

Inherit

Using the value inherit will cause the element being selected to get its parent’s text-transform value. If the parent does not have a text-transform value set, it will have the default value applied (none).

header {

text-transform: capitalize;

}

header h4 {

text-transform: inherit;

}

In this case, any h4 element that is a child of a header element will have the text-transform value of capitalize.

Initial

In CSS, initial refers to the initial value of the element. Since the initial value of elements for text-transform is none, using initial will have the same effect as using none.

Using CSS Instead of JavaScript

If you’ve written any JavaScript, you may have come across the two case-related methods: .toLowerCase() and .toUpperCase(). These are great when you’re trying to standardize the format of strings, especially if there’s a value comparison that should be case insensitive.