Cascading Style Sheets: HTML and CSS
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9
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>
|
Now, let's examine each portion of the document.
The LINK Tag
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default">First we consider the use of the LINK tag. The LINK tag
is a little-regarded but nonetheless perfectly valid tag that has been hanging
around the HTML specification for years, just waiting to be put to good use.
Its basic purpose is to allow HTML authors to associate other documents with
the document containing the LINK tag. CSS1 uses it
to link style sheets to the HTML document; in Figure
1-2, a style sheet called sheet1.css is linked to the document.
Figure 1-2. A representation of how external style sheets are applied to documents |
These style sheets, which are not part of the HTML document but are still used by it, are referred to as external style sheets. This is due to the fact that they're style sheets but are external to the HTML document. (Go figure.)
In order to successfully load an external style sheet, LINK must be placed inside the HEAD element but may not be placed inside any other
element, rather like TITLE or STYLE. This will cause the web browser to locate and load
the style sheet and use whatever styles it contains to render the HTML
document, in the manner shown in Figure
1-2.
And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example above, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the style sheet--only style rules. Here's the markup of an external style sheet:
H1 {color: red;}
H2 {color: maroon; background: white;}
H3 {color: white; background: black; font: medium Helvetica;}That's all there is to it -- no STYLE
tags, no HTML tags at all, just plain-and-simple style declarations. These are
saved into a plain text file and are usually given an extension of .css, as in sheet1.css.
The filename extension is not required, but some browsers won't
recognize the file as containing a style sheet unless it actually ends with
.css, even if you do include
the correct TYPE of text/css in the LINK element. So make sure you name your style sheets appropriately.
