In the previous chapter, you were shown how to attach CSS to a web page (see the section
“Adding styles to a web page” in Chapter 1), and we’ll briefly recap the process here. There
are two methods of attaching an external CSS file: the link method and the @import
method.The link tag specifies a relationship between the linked document and the document it’s
being linked to. In the context of attaching a CSS file, it looks something like this:
<link rel="StyleSheet" href="stylesheet.css" type="text/css"
å media="all" />
The attributes used are the following:
rel: Defines the relation from the parent document to the target
href: The location of the target file
type: The MIME type of the target document
media: The target medium of the target document
The title attribute is also occasionally used with the link element, either to provide
additional information or to be used as a “hook” for the likes of a style sheet switcher (see
www.alistapart.com/stories/alternate/ for more information). Any style sheet lacking
a title attribute (and a rel value of stylesheet) is persistent—always affecting a document.
These are by far the most common types of style sheets. A preferred style sheet also
takes a title along with the rel attribute and only one such style sheet can be used at a
time—typically the first, with subsequent ones ignored. On pages that offer alternate style
sheets (typically via a style switcher), the persistent styles are always used, and the first
preferred is the additional default; the preferred styles, however, can be swapped out by
selecting an alternative style sheet. (Note that in Firefox, you should avoid adding a title
attribute to any style sheet for print, because otherwise the content may not print.)
In the previous example, the media attribute is set to all, specifying that this style sheet is
intended for all devices. But it’s feasible to attach multiple style sheets to a web page, and
set the media attribute of each one to a different type. For instance, in the following example,
two CSS files are attached, one for screen and the other for printed output:
<link rel="stylesheet" href="stylesheet.css" type="text/css"
å media="screen" />
<link rel="stylesheet" href="printcss.css" type="text/css"
å media="print" />
There are other media types, including aural, braille, projection, and tv, but few are
supported well. However, in Chapter 10, we’ll look at style sheets for print, which is one of
the alternatives to screen that is supported reasonably well in mainstream browsers.
“Adding styles to a web page” in Chapter 1), and we’ll briefly recap the process here. There
are two methods of attaching an external CSS file: the link method and the @import
method.The link tag specifies a relationship between the linked document and the document it’s
being linked to. In the context of attaching a CSS file, it looks something like this:
<link rel="StyleSheet" href="stylesheet.css" type="text/css"
å media="all" />
The attributes used are the following:
rel: Defines the relation from the parent document to the target
href: The location of the target file
type: The MIME type of the target document
media: The target medium of the target document
The title attribute is also occasionally used with the link element, either to provide
additional information or to be used as a “hook” for the likes of a style sheet switcher (see
www.alistapart.com/stories/alternate/ for more information). Any style sheet lacking
a title attribute (and a rel value of stylesheet) is persistent—always affecting a document.
These are by far the most common types of style sheets. A preferred style sheet also
takes a title along with the rel attribute and only one such style sheet can be used at a
time—typically the first, with subsequent ones ignored. On pages that offer alternate style
sheets (typically via a style switcher), the persistent styles are always used, and the first
preferred is the additional default; the preferred styles, however, can be swapped out by
selecting an alternative style sheet. (Note that in Firefox, you should avoid adding a title
attribute to any style sheet for print, because otherwise the content may not print.)
In the previous example, the media attribute is set to all, specifying that this style sheet is
intended for all devices. But it’s feasible to attach multiple style sheets to a web page, and
set the media attribute of each one to a different type. For instance, in the following example,
two CSS files are attached, one for screen and the other for printed output:
<link rel="stylesheet" href="stylesheet.css" type="text/css"
å media="screen" />
<link rel="stylesheet" href="printcss.css" type="text/css"
å media="print" />
There are other media types, including aural, braille, projection, and tv, but few are
supported well. However, in Chapter 10, we’ll look at style sheets for print, which is one of
the alternatives to screen that is supported reasonably well in mainstream browsers.
No comments:
Post a Comment