The text-transform CSS property sets the capitalization of text, ignoring the case of the text in the document. It allows to either force capitalizing the first letter of each word or force all text to lowercase or uppercase.
text-transform: uppercase; /* all caps */ text-transform: capitalize; /* first letter of each word */
A value of capitalize will capitalize the first letter of each word, leaving the rest as is. uppercase will make all the text uppercase. text-transform doesn't follow language conventions like not capitalizing articles in English.
Browser Support: Full
lowercase/uppercase with CSS
To capitalize all characters simply use the uppercase value. Every letter will be trasformed. Remember the property will be inherited. Apply
text-transform: none on child elements to use the case of the document.
Hello, I'm in uppercase.
Hello, I'm in lowercase.
The capitalize value doesn't work exactly in the way one expects at first. It will always capitalize the first letter of each word but it won't make the rest lowercase.
<p class="capitalize" >this text was all lowercase AND THIS WAS ALL CAPS</h3>
this text was all lowercase AND THIS WAS ALL CAPS
There's currently no CSS way to capitalize the first letter only if the text has all-uppercase words.
CSS Title Case
Title case is the convention to capitalize the principal words in titles, while skipping prepositions, articles and conjunctions.
This is Title Case
text-transform vs font-variant
font-variant: small-caps rule (see font-variant) is also used to capitalize text with an important difference from
<p>This Text Is Capitalized With...</p>The result using font-variant and text-transform is:
This Text Is Capitalized With font-variant: small-caps
This Text Is Capitalized With text-transform: uppercase
As you can see the small-caps property makes the text uppercase but all characters have the same height of the original text with default casing. text-transform gives full-height uppercase characters always.