Designating Text Transformations Using CSS

Text transform is a very handing CSS style designation that allows us to, through a style sheet, turn all of our letters into caps or lower case, or to capitalize the first letter of each word. All of this may be done without retyping any of our copy!!

The text-transform styles may be used in conjunction with any text containing HTML element, such as tables, paragraphs, headings, and divs.

Let's take a look at some CSS text-transform style settings.

h1     {text-transform:upercase;}
h2     {text-transform:capitalize;}
p      {text-transform:lowercase;}

Notice that text-transform styles are easy to implement. After designating that you are applying a text-transform style, you simply name the style you desire.

By default (if you did not designate a style at all, this is what would happen) the text-transform settings are at "None". Text will appear capitalized as you type it.

The CSS designations I've shown you above would create h1 headings in all uppercase letters (regardless of how they were typed), all h2 level headings with the first letter of each word capitalized (regardless of how they were typed), and all paragraph text would appear in all lowercase lettering (again, regardless of how it was typed).

Using the text-transform style makes it easy to change the look of your entire site. It is, in my opinion, one of the greatest CSS elements that exists.

You should now be able to use CSS to designate text transformations for your HTML documents.