Break the <FONT ...> Habit: Other Elements

In our first example we applied font styles to an <H2 ...> element. Just about any HTML element can have style rules applied to it in the same way. Indeed, the purpose of styles is to allow you to fancy up your web page while still using plain simple HTML.

For example, suppose that you want to emphasize certain words in your page. The logical tag for this purpose is <EM>. However, <EM> is usually rendered in a rather plain italics. You can jazz up how <EM> is rendered with a style rule (in a STYLE tag or in a style sheet file) like this:

EM
 {
 color:red;
 font-weight:900;
 font-style:normal;
 }

This rule says that the color of fonts in <EM> should be red, they should have a weight of 900, and the style should be normal (instead of italic). So when you use <EM> in your page:

That is a <EM>groovy</EM> idea.

you get something that's really emphasized:

That is a groovy idea.

Font styles can also be applied to block level elements such as <P ...>, <DIV ...> and <BLOCKQUOTE ...>. For example, suppose you wanted your quoted material to have a special font. You could create a style rule that sets the quotes off from the rest of the page like this:

BLOCKQUOTE
 {
 font-style:italic;
 font-family:sans-serif;
 font-size:90%;
 }

This rule states that characters in a <BLOCKQUOTE ...> should be italic, they should be sans-serif, and they should be smaller than surrounding text. So when we use a <BLOCKQUOTE ...> tag:

<BLOCKQUOTE>
quoted material
</BLOCKQUOTE>

it is rendered like this:

(7) Charles M. Schulz's television special, `A Charlie Brown Christmas', has run for 34 consecutive years. In all, more than 60 animated specials have been created based on `Peanuts' characters. Four feature films, 1,400 books, and a hit Broadway musical about the `Peanuts' characters have also been produced.

(8) Charles M. Schulz is a leader in the field of comic illustration and in his community. He has paved the way for other artists in this field over the last 50 years and continues to be praised for his outstanding achievements.

SPAN and DIV >>>