There are a few ways to add CSS style information to an (X)HTML document, but it’s almostalways a best practice to use the <link> tag. The tag’s purpose is simple: to associate one document with another. For our purposes, let’s use it to associate a CSS document with an XHTML
document, like so:
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
This simply tells the XHTML document to use the file styles.css as a source of CSS information. We call CSS documents referenced in this way external style sheets. Link tags that reference external style sheets must be placed inside the head element of your (X)HTML document (but not inside any other element).
The attributes of the <link> tag are fairly straightforward. The rel, or relation, attribute, describes the sort of relationship the linked file has to the (X)HTML file calling it. For CSS stylesheets, its value will always be stylesheet. The type attribute defines the file type of the linked file, and its value should always be text/css for CSS style sheets. As you might expect, the href attribute declares the URL of the style sheet file you’d like to attach to your document. This
URL may be absolute or relative. The final attribute, media, states for which presentation media the styles contained in the external style sheet should be applied.
Using Multiple Style Sheets
You can also attach multiple style sheets to a single (X)HTML document with the <link> tag. The browser will use all linked style sheets and render the page accordingly.
Also, there exists the concept of an alternate style sheet. In some browsers (notably those powered by the Gecko rendering engine, such as Mozilla, Firefox, and recent versions of (Netscape), these alternate visual presentations of your document will appear in a menu for the visitor to select between. For example:
<link rel="stylesheet" type="text/css" href="styles.css" media="all" title="Default" />
<link rel="alternate stylesheet" type="text/css"
href="low_vision_styles.css" media="all" title="Low vision" />
Here, we’ve defined references to two different style sheets. Because the second one has the value alternate stylesheet for the rel attribute, it will not be used when the page is first presented but will be offered to the user as a choice (only in those browsers that support it, though). Note the use of the title attribute to give each style sheet a name (which will appear in the visitor’s menu of choices). Alternate style sheets are not widely used, probably because of their
limited browser support.
It’s important to note that any <link> tag with both a title attribute and a rel value of stylesheet will be considered a preferred style sheet. Only one preferred style sheet will be used when the page is initially loaded. Therefore, it’s important that you don’t assign multiple <link> tags both a title attribute and a rel attribute value of stylesheet. <link> tags without a title attribute are designated as persistent style sheets— which means they’ll always be used in the display of the document. More often than not, this is the behavior you’ll want. Because of this, you should only apply a title attribute to your <link> tags if you are referring
to an alternate style sheet.