Cascading Style Sheets: HTML and CSS
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9
LINK attributes
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 TITLE
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 REL of 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>
It's also possible to define alternate style sheets. These are
marked with a REL of alternate 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
of the TITLE attributes to generate a list of style
alternatives. So you could write the following:
<LINK REL="stylesheet" TYPE="text/css"
HREF="sheet1.css" TITLE="Default">
<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.
|
WARNING:
Alternate styles sheets are only supported by one browser as of this writing -- Internet Explorer for Macintosh -- and that only with a JavaScript widget, which does not ship with the browser. None of the three major browsers natively supports the selection of alternate style sheets (shown in Figure 1-4).
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 REL of alternate stylesheet unless that style sheet is selected by the user.
