HTML and CSS Reference
In-Depth Information
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 pre-
sented 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.
The style Element
The
style
element is an (X)HTML element that allows you to embed CSS style information
directly in the page you're working on, rather than abstracting it out to an external style sheet.
Although this may sound like a convenience at first, it's almost always a hindrance in the real
world. One of the major benefits of CSS is the ability to have all of your style information in
a single external style sheet that many pages refer to. That way, when you want to change
something, you only have to change it one time. In the case of embedded style sheets created
with the
style
element, the style information applies only to the (X)HTML document you're
working with. It's possible this behavior is what you want, but more often than not it's benefi-
cial to have the style information abstracted.
If you do want to embed a style sheet, use code like this in the
head
element of your
(X)HTML document:
<style type="text/css" media="screen, print ">
...
</style>
The practical applications of embedded style sheets are few. If you are making a simple,
one-page site, it may be more convenient to keep your style information embedded in your
(X)HTML document. You may also have one page within a larger site that needs additional or
overriding styles along with the styles applied to the rest of the site. In this case, you can get by
with an embedded style sheet, but it still may be a best practice to abstract the styles into their
own file. You never know when you may need to add another page utilizing those styles, or
