Text-transform command
Text-transform command
One of the lesser known, but really useful CSS commands is the text-transform
command. Three of the more common values for this rule are: text-transform: uppercase
, text-transform: lowercase
and text-transform: capitalize
. 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.