CSS Introduction

Original Author(s): Markus Gylling

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.

"viewport agnosticism"

"device independence"

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.

Unstructured pages make content indexing inordinately difficult. A truly powerful search engine would allow users to search just page titles, or only section headings within pages, or only paragraph text, or perhaps only those paragraphs that are marked as being important. In order to do this, however, the page contents must be contained within some sort of structural markup -- exactly the sort of markup most pages lack.

A lack of structure reduces accessibility. Imagine that you are blind, and rely on a speech-synthesis browser to browse the Web. Which would you prefer: a structured page that lets your browser read only section headings so you can choose which section you'd like to hear more about; or a page so lacking in structure that your browser is forced to read the entire thing with no indication of what's a heading, what's a paragraph, and what's important?

Advanced page presentation is only possible with some sort of document structure. Imagine a page in which only the section headings are shown, with an arrow next to each. The user can decide which section heading applies to him and click on it, thus revealing the text of that section.

Structured markup is easier to maintain. How many times have you spent long minutes hunting through someone else's HTML (or even your own) in search of the one little error that is messing up your page in one browser or another? How much time have you spent writing nested tables and FONT tags, just to get a sidebar with white hyperlinks in it? How many line-break tags have you inserted trying to get exactly the right separation between a title and the following text? By using structural markup, you can clean up your code and make it easier to find what you're looking for.

The CSS Cascading Model - three origins

  1. Author
    • 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.
  2. User
    • 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).
  3. User Agent
    • 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 rel and 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?

Browser compatibility

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.

Read more

DAISYpedia Categories: 


This page was last edited by PVerma on Wednesday, August 25, 2010 19:39
Text is available under the terms of the DAISY Consortium Intellectual Property Policy, Licensing, and Working Group Process.