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.
🐊 Alligator.io recommends �
Advanced CSS and Sass: Flexbox, Grid, Animations and More!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+.🔥