How to Title Case and Other Upper and Lower Case CSS Tricks

Chris Love

Last Updated - Wed Jan 20 2021

You can control how text is capitalized using CSS properties. There are many 'tricks' using CSS text-transform to change the way your text is displayed.

There is no html code for all caps or all lower case, title case. It is all done using CSS.

Until recently it had not occurred to me using CSS to manage how capitalization is applied frees me to store data using lower case characters. I find it is better to use all lower case characters for data because I can then transform the fields as needed for different applications.

For example I tend to use my article title as url slugs. I run the title through a regular expression to lower case the characters, remove invalid url characters and replace any spaces with '-'.

By using the CSS text-transform property you can title case, upper case and lower case. Combining the text-transform properties with pseudo selectors you can perform even more customization that make your pages stand apart from the competition.

• The CSS text-transform Property
• How do You Make Each Word in a String or Text Start With a Capital Letter or Title Case the Text?
• Summary

The CSS text-transform Property

The CSS text-transform property is the key to managing text uppercase and lowercase rendering. There are 5 different values you can use:

1. lowercase: makes all of the letters in the selected text lowercase
2. uppercase: makes all of the letters in the selected text uppercase or ALL CAPS
   
3. capitalize: capitalizes the first letter of each word in the selected text
   
4. none: leaves the text's case and capitalization exactly as it was entered
   
5. inherit: gives the text the case and capitalization of its parent
   
6. full-width: Is a keyword forcing the writing of a character (mainly ideograms and latin scripts) inside a square, allowing them to be aligned in the usual East Asian scripts
   

CSS lowercase

Using the lowercase value forces the text or font to be rendered using lowercase characters.

p {
 text-transform: lowercase; 
}

THIS IS A SCREAMING SENTANCE THAT CAN BE SOFTENED USING LOWERCASE!

CSS uppercase - How to Capitalize All Letters in Word

Using the uppercase value forces the text or font to be rendered using uppercase characters.

this example converts an all lowercase string to screaming uppercase.

p {
 text-transform: uppercase; 
}

How do You Make Each Word in a String or Text Start With a Capital Letter or Title Case the Text?

Title case is where each word in a sentence or string starts with a capital letter. The capitalize value causes a string to render in title case, or at least each word starts with a capital letter.

If a letter in the formatted text is uppercase it will not lower case the letter to make proper title case.

THis soURCE tExT iS All oVER thE PlaCe With LowER and CAPital LeTTerS. but Every wOrd Starts wITH a Capital lEETTER.

this example is a more proper title case example.

p {
 text-transform: capitalize; 
}

Notice how the first paragraph, with a random mix of capital and lower case characters does not lower case all the characters? That's because capitalize is not title-case.

Right now there is no titlecase value available. Instead you should take care to lower case the source before rendering.

Using a Pseudo Selector to Apply a text-transform to the First Letter

A relatively modern feature available to CSS selectors is the concept of a pseudo selector. You can use the ::first-letter selector to apply a different style to the first character of a string.

This allows you to apply some 'fancy' styling if you would like. Think about it as way to create that calligraphy affect where the first letter of a chapter is large and decorative.

In this example the lowercase text-transform is applied to the sentence. Then the ::first-letter selector is used to apply custom styling to the paragraph's first letter. Specifically the first letter is upper case, larger and has a different font family applied.

p {
 text-transform: lowercase;
 line-height: 3; 
} 

p::first-letter {
 text-transform: uppercase;
 font-size: 3em;
 font-weight: bold;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; letter-spacing: 5px; 
}

THis soURCE tExT iS All oVER thE PlaCe With LowER and CAPital LeTTerS. but THE firST wOrd Starts wITH a laRGe Capital lEETTER. This is a second sentance.

Summary

As you can see you can control how text is rendered using the text-transform property. Knowing you can control how your text is capitalized means you can possibly store the text as all lower case.

Another advantage the CSS text-transform property enables is the elimination of JavaScript to transform the characters. CSS will be a much more efficient job capitalizing the characters in the browser.