DevHints

CSS: Make it all Uppercase/Lowercase

Posted on: November 1, 2006

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.

strong {
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!

4 Responses to "CSS: Make it all Uppercase/Lowercase"

[…] here you go guys, thats the best i could come up with CSS: Make it all Uppercase/Lowercase « DevHints […]

[…] sure if this will help CSS: Make it all Uppercase/Lowercase « DevHints __________________ Colour Printing and Integrated Cards || Graphic Design & Colour Printers […]

Nice article! It’s very useful for me.

Thanks for CSS upercase or css capitalize html

-sara
CSS Uppercase

Leave a comment