CSS: Make it all Uppercase/Lowercase
Posted November 1, 2006on:
There’s a rather unknown property in CSS called text-transform. It allows you to force all the text for a particular element to be transformed to UPPERCASE, Proper Case, or lowercase.
text-transform: lowercase; /* force text to lowercase */
text-transform: uppercase; /* force text to uppercase */
text-transform: capitalize; /* force text to proper case */
It’s quite useful for making your links stand out, or making sure that all the links in your menu bar are uppercase. You can also use it in association with :hover, :active, :visited, and :link to make your links go all uppercase when hovered over.
Did I mention that you can also use this to force text to become Proper Case (so the first letter in each word is capitalized)? That means if you aren’t going to need to store the information differently, you don’t need to bother using a server side language to change text to proper case, you can just set your CSS up right!
Some other cool uses for this include making all the text entered in a CAPTCHA input text field uppercase so the user doesn’t have any question as to whether the CAPTCHA is case sensitive or not (note, this will only affect the display, so data sent to your scripts might not have caps), and showing the active link as uppercase, instead of changing the color or underlining it!