How to Make Text All Uppercase in CSS

Above you can see 2 menus, one in which the text is all lowercase and the other in which the text is all uppercase.

How can we make this switch from lowercase to uppercase, without having to actually manually go to each word and change the capitalization manually?

It turns out that CSS has a built-in function which allows all text to autmotically be changed to uppercase.

To change all text to uppercase, add the following line of CSS into the div block tag which contains the text which you want changed. text-transform:uppercase;

In our case, the menu is the object we are changing to all uppercase, so we have appropriately called this the menu class.
The full HTML code for this menu tag is:

<ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Guest Book</a></li> <li><a href="#">Events</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Register</a></li> </ul>

The full CSS code to style this menu bar is:

.menu { font: 1em Georgia; list-style:none; padding:0; margin:0; background:#fff; text-transform:uppercase; border-bottom:3px solid #000; border-top:1px solid #ddd; }

This is the full complete code to style the menu bar and you can see the line text-transform:uppercase; being the integral line which we need to make all the links on the menu bar uppercase.