Text-transform is an incredibly useful CSS property, yet also one of the most underused. Here are its possible values (with examples):
none : Default. Defines normal text, with lower case letters and capital letters
e.g. The quick brown fox jumps over the lazy dog.capitalize : Each word in a text starts with a capital letter
e.g. The quick brown fox jumps over the lazy dog.uppercase : Defines only capital letters
e.g. The quick brown fox jumps over the lazy dog.lowercase : Defines no capital letters, only lower case letters
e.g. The quick brown fox jumps over the lazy dog.
How useful is text-transform? Well, let’s say you want all of your h3 headers to be in all-caps on your blog. You could type it in with all-caps in your blog title field, but there are a few problems there:
- You would have to do this every time you wrote a blog post.
- Should you decide, in the future, that you don’t want all h3 headers in uppercase- you would have to rewrite everything.
- For blogs or sites with multiple authors, you would have to make sure each author knows to type in uppercase for a certain field.
- The search engines that index you will show your titles IN ALL CAPS, which looks kinda spammy.
So here’s what you do. You write your blog titles normally, and in your stylesheet you add:
h3 {text-transform:uppercase}
This way, your titles are in uppercase. You can transform them anytime by changing uppercase to capitalize or lowercase. You don’t need to tell other authors which things to capitalize or type in all uppercase. And the search engines will publish them normally in their results. Everybody wins.
And what if you want your blog title h3s to be uppercase, but not the h3s in your sidebar? That’s where none comes in. Add something like this to your stylesheet:
#sidebar h3 {text-transform:none}
and voila! All h3 titles in your sidebar revert back to normal casing.
Do you use text-transform? What are your favorite underused CSS properties?
