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 worse, what if we wanted to do something more than just changing the paragraph’s color?
In the early 1990s, the only way to control the color,
size, and font of your text was the
element. So people wrote a lot of HTML code 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.
style attribute is an improvement over
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
only sparingly if at all. In the next section, we’ll look at
a much better way to do this.