CSS Uppercase and CSS Capitalize

Need to know how to make text all uppercase or in all caps with CSS? Add the following to your CSS stylesheet:

.uppercase { text-transform: uppercase; }

Now whenever you add a HTML element with the CSS class uppercase it will transform all the text to uppercase within that element.

CSS Uppercase Example

For example, here we have a div with the class attribute uppercase, and the text: css uppercase.

<div class="uppercase"> css uppercase </div>

The browser will transform the text to be: CSS UPPERCASE.

CSS Capitalize Example

The above example will take all the letters and capitalize or uppercase them. If you only want the first letter of each word to be in uppercase, then use capitalize in the text-transform property.

div.caps { text-transform: capitalize; } 

Here's an example:

<div class="caps"> css capitalize </div>

In this example the text would be transformed with the case: Css Capitalize

Check out my CSS Cheat Sheet for more handy css tricks.