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:

<h4>Learning with Alligator.io 🐊</h4>

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.

However, they can get overused. 🙈 One situation where you may not need to update your strings in your JavaScript code is if a case change is for stylistic purposes. For example, if you want all your headers to be uppercase, you can apply CSS’s text-transform property to all your headers. It’s much faster and easier to maintain than going through all your code and applying .toUpperCase() to your header strings.

Additionally, it’s not uncommon to only want the first letter of a word to be capitalized. JavaScript doesn’t have a capitalize method, but you could write something like this:

function capitalize(string) {
  const firstLetter = string.charAt(0).toUpperCase()
  const restOfString = string.slice(1).toLowerCase();
  return firstLetter + restOfString;
}

capitalize('alligator'); // "Alligator"

Though there may be reasons to write something like this, it can be easy to get caught up in formatting everything in your JavaScript code. Remember that CSS has you covered if you’re just trying to improve the look for site visitors! 🧁

Browser Support

text-transform is luckily one of those CSS properties you don’t have to worry about using regardless of how many browser versions you support. It’s supported by all modern browsers, including IE6+.🔥