Reasons for CSS
Separation of structure from presentation
CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the HTML in their documents, making the documents more accessible at the same time.
Precise spacing, alignment and positioning
CSS allows precise control over spacing, alignment and positioning. Authors can thereby avoid "tag misuse" - the practice of misusing a structural element for its expected stylistic effects. For example, while the BLOCKQUOTE and TABLE elements in HTML are meant to mark up quotations and tabular data, they are frequently used to create visual effects instead such as indentation and alignment. When specialized browsing software such as a speech synthesizer encounters elements that are misused in this way, the results can be unintelligible to the user.
Precise font control
CSS provides precise control over font size, color, and style. Some authors have used images to represent text in a particular font when they are uncertain of the availability of the font on the client's machine. Text in images is not accessible to specialized software such as screen readers, nor can it be cataloged by search robots. To remedy this situation, the powerful WebFonts of CSS allows users much greater control of client-side font information. With WebFonts, authors can rely on fallback mechanisms on the client when the author's preferred fonts are not available. Fonts can be substituted with more accuracy, synthesized by client software, and even downloaded from the Web, all according to author specification.
Users can override author styles
CSS allows users to override author styles. This is very important to users who cannot perceive a page with the author's chosen fonts and color. CSS allows users to view documents with their own preferred fonts, colors, etc. by specifying them in a user style sheet.
[see further: the cascading model]
Autogeneration of orientation aids
CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document. Long lists, tables, or documents are easier to navigate when numbers or other contextual clues are provided in an accessible manner.
Aural Style Sheets
CSS supports aural style sheets, which specify how a document will sound when rendered as speech. Aural style sheets (or "ACSS" for short) allow authors and users to specify the volume of spoken content, background sounds, spatial properties for sound, and a host of other properties that can add effects to synthesized speech analogous to those achieved with styled fonts for visual output.
However, implementation of ACSS support in user agents is still sparse.
The CSS Cascading Model - three origins
- The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
- The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did).
- Conforming user agents must apply a default style sheet prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font).
The CSS Cascading Model - the cascade
Style sheets from these three origins will overlap in scope, and they interact according to the cascade.
The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules.
All rules user and author rules have more weight than rules in the UA's default style sheet.
Associating CSS with content
Preferred and optimal: external file
<head> [...] <link type="text/css" rel="stylesheet" href="stylesheet.css" title="default" /> [...] </head>
Suboptimal but sometimes useful: head element
<head> [...] <style> [rules] </style> [...] </head>
What are the benefits and drawbacks of these two methods?
Alternative style sheets
A document can have multiple style sheets associated with it. The user is given an option to choose. Not all browsers support this feature.
To include extra style sheets, add more
<link> elements in <head>, with the
title attributes as follows.
<link type="text/css" rel="stylesheet" title="default style" href="default.css" /> <link type="text/css" rel="alternate stylesheet" title="high contrast" href="highcontrast.css" /> <link type="text/css" rel="alternate stylesheet" title="large font" href="largefont.css" />
Groups of links with the same
<title> are automatically combined into one style sheet.
- in Firefox 3, select "View" -> "Page Style"
- in Opera?
What alternatives are there to alternate style sheet provision?
Support for CSS in browsers vary. It is important to check your stylesheet in multiple browsers, and multiple release versions of browsers.
Which browsers are used worldwide today?
When can on old version of a certain browser be considered obsolete?
Some CSS Editors have compatibility checking mechanisms.
Text is available under the terms of the DAISY Consortium Intellectual Property Policy, Licensing, and Working Group Process.