Accessibility - Web Standards: Mastering HTML5, CSS3, and XML - page 360

2. Preferred CSS file: Styles enabled by default when the page is loaded. The attribute value of

the rel attribute is stylesheet, and the title attribute is provided (Listing 10-7).

Listing 10-7. A Preferred CSS File

<link rel="stylesheet" type="text/css" href="styles/main.css" title="Preferred" />

3. Alternate CSS files: CSS files designed for alternate versions of the site that reuse the styles

declared in the main style sheet file but overwrite some of them (for example, set the font
size to a larger value, or modify the font color to achieve higher contrast) or add new ones
on top of the reused ones (for example, define a maximum width for mobile devices).
They can be used not only for increasing accessibility but also for design or media-
specific versions of the site (as hinted earlier in Chapter 3). Alternate CSS files have the
rel attribute value alternate stylesheet instead of stylesheet , and a title attribute
identifies them (Listing 10-8).

Listing 10-8. Alternate Style Sheets

<link rel="alternate stylesheet" type="text/css" href="styles/large.css" 
title="Large" />
<link rel="alternate stylesheet" type="text/css" href="styles/contrast.css" 
title="Contrast" />
First, create three CSS files, one for the main styles (Listing 10-9) and two for alternate styles that will provide
large font size (Listing 10-10) or huge font size with high contrast (Listing 10-11), respectively.

Listing 10-9. The Main CSS File ( main.css )
body {
background-color:#004c25;
color: #cff;
font-family: Garamond, serif;
font-size: 1.2em;
}

#wrapper {
width: 800px;
margin: auto;
}

#wrapper a:link {
color: #ff0;
}

#wrapper a:hover {
color: #ffa000;
}