Using Style Sheets
Review the W3C CSS standard recommendation.Alternate Style Sheets and Media Types
Alternate Style Sheets
One advantage of using external style sheets is the ability to define alternate style sheets. Normally, when multiple style sheets are included in a page, all are applied to it. But with alternate style sheets, you can give the user a choice.
You can define a style sheet, or a group of style sheets, as either "persistent," "preferred" or "alternate." Persistent style sheets are always applied to a page. But alternate style sheets are mutually exclusive. The user may select any one group and it will be applied but all the other alternates will be ignored. One of these alternates may be designated as the preferred style sheet group, which will be selected by default when the page is initially loaded.
Below is an example of the HTML code for defining these style sheet types.
<link href="persistent.css" type="text/css" rel="stylesheet"> <link href="preferred.css" type="text/css" rel="stylesheet" title="Preferred"> <link href="alternate1.css" type="text/css" rel="alternate stylesheet" title="Alternate One"> <link href="alternate2a.css" type="text/css" rel="alternate stylesheet" title="Alternate Two"> <link href="alternate2b.css" type="text/css" rel="alternate stylesheet" title="Alternate Two">
Here, the "persistent.css" style sheet will always be applied to the page. The browser knows it's persistent because it has no TITLE attribute.
The other three do have TITLE attributes, however, so the browser knows they are alternate style sheets. They are grouped according to the title name so here there are three groups in all, "Preferred," "Alternate One" and "Alternate Two." Note that "Alternate Two" consists of two style sheets.
The browser should allow the user to select any of these three groups. When any one is selected, it is applied and the other two are ignored.
The "Preferred" group will be the default, because it's REL attribute is set
to "stylesheet"
while the other two groups are set to
"alternate stylesheet".
View-> Use Stylesheet
on the menu bar
it will display a list of the alternate style sheet titles which you can choose
from.
You can see how this works in this demo, if your browser supports alternate style sheets.
Media Types
CSS also provides a means to specify alternate styles for different media. This includes print and speech or braille devices for the visually impaired. A list of such specialized software and devices can be found on the W3C's Web Accessibility site.
Making web pages work with these types of browsers may be critical to some sites (like goverment agencies that must comply with accessibility laws) or simply beneficial to others. CSS's support of multiple media types makes it easier to address accessibility without compromizing your site's look.
Support for separate print-only styles should appeal to anyone who has had to design special templates and code server-side scripts to generate alternate, "printer-friendly" pages.
@
-Rules
CSS defines some special rules denoted by the '@' character. Among these
are @import
which let's you include an external style sheet and
@media
which delimits style rules for a given media type.
The @import
rule may be included at the beginning of any style
sheet. It expects the URL of a file containing additional style rules to add to
the current style sheet. It optionally allows you to specify a list of media
types.
@import "/styles/defaults.css"; @import url(/styles/forum.css); @import url("/styles/print.css") print, handheld;
In the above, the first two rules import a pair of external style sheets.
The third rule specifies an external style sheet for two media types,
print
and handheld.
The advantage of declaring media
types in this case is that the browser need not load the last style sheet
(unless it is a handheld device) or can wait to load it only if the user prints
the page.
Note that @import
rules must be included at the start of a
style sheet, outside of any blocks. In the following, the first
@import
rule is valid but the other two would be ignored.
@import "sheet1.css" body { @import "sheet2.css" background-color: black; color: white; } @import "sheet3.css"
The @media
Rule
The @media
rule designates a block of rules that apply only to
the specified media type or types. For example, a page with light colored text
on a black background may look great onscreen, but may be unreadable when
printed. So you could specify a style sheet like this:
body { background-color: #ffff00; /* yellow text on a black background */ color: #ffffff; } @media print { body { background-color: #ffffff; /* black text on a white background */ color: #000000; } }
Note the curly braces surrounding the print
rules. You can
also specify a list of media types on the @media
rule by
separating the keywords with commas.
Designating Media on LINK and STYLE Tags
You can also specify media types on the HTML LINK and STYLE tags using the MEDIA attribute.
<link href="default.css" rel="stylesheet" type="text/css" media="screen,projection"> <style type="text/css" media="screen,projection"> ...style rules... </style>
Again, multiple media types can be specified as a comma-separated list.