The style Attribute

So far we’ve dealt with two major components to our web pages: the elements, which define the basic structure of the page, and the styling, which further refines how the page should look. We saw the effects of styling in “Colors”:

<p>
  The grandmother lived out in the wood, half a league from the village,
  and just as Little Red-Cap entered the wood, a wolf met her. Red-Cap
  did not know what a wicked creature he was, and was not at all afraid
  of him.
</p>
<p style="color: red">
  'Good day, Little Red-Cap,' said he.
</p>
<p>
  'Thank you kindly, wolf.'
</p>

Now, it’s nice that we can make a single paragraph red, but what if we wanted all paragraphs to be red? Or what if we wanted to do something more than just changing the paragraph’s color?

In the early 1990s, the only way to do control the color, size, and font of your text was the font element. So people wrote a lot of HTML that looked like this:

<B><I><FONT Size="+2">
<FONT FACE="Palatino, Arial, Helvetica">
<FONT color="#ff0000">
Kneel Before the Power of the Font Element!
</FONT>
</font></Font></i></B>

<p><FONT Size="-1">
<FONT FACE="Arial, Helvetica, sans-serif">
<FONT color="#123456">
Ow! The bad HTML code! It burns us, burns us, precious!
</font></font></FoNt></p>

This was a tremendous pain for many reasons. You had to keep typing this kind of markup all over the page, and if your boss told you later on to change the font size, you had to redo all this code again.

The style attribute is an improvement over the font element, but it still suffers from the same basic problem: it isn’t reusable. You don’t want to have to add a style element to every element on the page. Fortunately, there is a much better way to do all of this. These days, you should never use the font element, and the style attribute only sparingly if at all. In the next section, we’ll look at a much better way to do this.