Bringing CSS and HTML Together
We keep visiting the point that HTML documents have an inherent structure. In fact, that’s part of the problem with the Web today: too many of us forget that documents are supposed to have an internal structure, which is altogether different than a visual structure. In our rush to create the coolest-looking pages on the Web, we’ve bent, warped, and generally ignored the idea that pages should contain information that has some structural meaning.
However, that structure is an inherent part of the relationship between HTML and CSS; without the structure, there couldn’t be a relationship at all. In order to understand it better, let’s look at an example HTML document and break it down by pieces. Here’s the markup, shown in Figure 1-1:
<HTML>
<HEAD>
<TITLE>Eric's World of Waffles</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default">
<STYLE TYPE="text/css">
@import url(sheet2.css);
H1 {color: maroon;}
BODY {background: yellow;}
/* These are my styles! Yay! */
</STYLE>
</HEAD>
<BODY>
<H1>Waffles!</H1>
<P STYLE="color: gray;">The most wonderful of all breakfast foods is
the waffle-- a ridged and cratered slab of home-cooked, fluffy
goodness...
</P>
</BODY>
</HTML>
Figure 1-1. A simple document
Now, let’s examine each portion of the document.
The LINK Tag
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default">
First ...