Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






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>


Figure 1-3.Combining linked style sheets

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.


Figure 1-4. A browser offering alternate style sheet selection

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.

Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

Next Pagearrow