Cascading Style Sheets: HTML and CSS
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9
For the rest of the
LINK tag, the attributes and values are fairly straightforward.
REL stands for "relation," and in this case, the relation is "stylesheet."
TYPE is always set to
text/css. This value describes the type of data that is to be loaded using the
LINK tag. That way, the web browser knows that the style sheet is a CSS style sheet, a fact that will determine how the browser deals with the data it imports. After all, there may be other style languages in the future, so it will be important to say which language you're using.
Next we find the
HREF attribute. The
value of this attribute is the URL of your style sheet. This URL can be either
absolute or relative, depending on what works for you. In our example, of
course, the URL is relative. It could as easily have been something like http://www.style.org/sheet1.css.
Finally, there is the
attribute. This attribute is not often used, but it could become important in
the future. Why? It becomes important when there is more than one
LINK tag--and there can be more than one. In these cases,
however, only those
LINK tags with a
stylesheet will be used
in the initial display of the document. Thus, if you wanted to link in two
style sheets with the names basic.css and splash.css, the markup would look like this:
<LINK REL="stylesheet" TYPE="text/css" HREF="basic.css">
<LINK REL="stylesheet" TYPE="text/css" HREF="splash.css">
This will cause the browser to load both style sheets, combine the rules from each, and apply the result to the document (see Figure 1-3). We'll see exactly how the sheets are combined in the next chapter, but for now, let's just accept that they're combined. For example:
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet-a.css">
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet-b.css">
<P CLASS="a1">This paragraph will be gray only if styles from the
stylesheet 'sheet-a.css' are applied.</P>
<P CLASS="b1">This paragraph will be gray only if styles from the
stylesheet 'sheet-b.css' are applied.</P>
Figure 1-3.Combining linked style sheets
It's also possible to define alternate style sheets. These are
marked with a
stylesheet and come into play only if they're selected by the reader.
Alternate style sheets
Unfortunately, as of this writing, browsers don't make it very
easy to select alternate style sheets, assuming that they can do so at all.
Should a browser be able to use alternate style sheets, it will use the values
TITLE attributes to generate a list of style
alternatives. So you could write the following:
<LINK REL="stylesheet" TYPE="text/css"
<LINK REL="alternate stylesheet" TYPE="text/css"
HREF="bigtext.css" TITLE="Big Text">
<LINK REL=" alternate stylesheet " TYPE="text/css"
HREF="spoken.css" TITLE="Spoken Word">
Users could then pick the style they wanted to use, and the browser would switch from the first one (labeled "Default" in this case) to whichever the reader picked. Figure 1-4 shows one way in which this selection mechanism might be accomplished.
Figure 1-4. A browser offering alternate style sheet selection
As of this writing, the one browser that does recognize
alternate style sheets (Internet Explorer for Macintosh) will not apply the
styles from any
LINK element with a
stylesheet unless that style sheet is selected by the user.
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9