HTML and CSS Reference
In-Depth Information
plied. The style sheet in the preceding code snippet is a persistent style sheet. In contrast,
not all preferred and alternate style sheets may be applied. If multiple preferred and al-
ternate style sheets are linked to an HTML document, only one will be selected and used
on the page. An alternative style sheet works just like a preferred style sheet, with the
additional meaning that it can be used as a replacement for the preferred style sheet spe-
cified on the page. Alternative style sheets may be selected by the user for preferential
or accessibility reasons.
The following shows a page with a persistent, preferred, and two alternative style
sheets attached:
…
<head>
<meta charset="utf-8" />
<title>HTML5 and CSS together</title>
<link rel="stylesheet" href="css/main.css" type="text/
css" />
<link rel="stylesheet" href="css/colors-generic.css"
type="text/css" title="Generic color styles" />
<link rel="alternative stylesheet" href="css/colors-
protanopia.css" type="text/css" title="Protanopia adjusted
color styles" />
<link rel="alternative stylesheet" href="css/colors-
deuteranopia.css" type="text/css" title="Deuteranopia ad-
justed color styles" />
</head>
…
In this example page,
main.css
is the persistent style sheet and is used to set all the
styles for the page, across all situations.
colors-generic.css
is a preferred style
sheet that adds the color-related styles to the page. The two alternative style sheets are
given as a choice for users with color blindness in the red-green spectrum:
colors-
protanopia.css
for protanopia and
colors-deuteranopia.css
for deuter-
anopia. Presumably, activating these styles would alter the page colors to compensate
for areas where color blindness may make the content difficult to view. How these
alternative style sheets become available depends on the user agent in use, but some
browsers offer a menu option where the user can select alternative styles (
Figure 6-1
)
.
Search WWH ::
Custom Search