CP Blogs

CSS text-transform Property

---

string(160) "Smarty error: [in evaluated template line 12]: syntax error: unrecognized tag:
text-transform: uppercase
(Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in evaluated template line 12]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"

One of the lesser known, but really useful CSS commands is the text-transform command. Comprised of three of the more common values for this rule are:

• text-transform: uppercase
• text-transform: lowercase
• text-transform: capitalize.

Examples

p

Possible Values

Value	Description
none	Default. Defines normal text, with lower case letters and capital letters
capitalize	Each word in a text starts with a capital letter
uppercase	Defines only capital letters
lowercase	Defines no capital letters, only lower case letters

 

The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word capitals.

This command is incredibly useful to help ensure consistency in style across an entire website, particularly if there a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won't show up on the website.

It's also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is ‘CONTACT US’, which is pronounced as ‘contact U S’ by some screen readers.