DEMOS Project - Accessibility Guide: Cascading Style sheets (CSS)

[Back]

Cascading Style sheets (CSS)

The main purpose of style sheets in the context of accessibility is to separate presentation from structure. This means taking presentational mark-up like font styles out of the main HTML document and specifying these styles in a separate document, the external style sheet.

Facilitating user control

Where HTML defines the structure of a document, CSS defines its presentation.

By specifying all presentational mark-up, such as font sizes, background, text and link colours, plus the page layout (margins, columns, etc.) in a separate style sheet rather than in the HTML document, we make it possible for users to ignore such styles and apply their own. They can change the preferences in their browser to increase fonts, change the colour of the background, make links stand out more, or they can even apply their own customized style sheet.

The Opera browser , which is available for free, offers the best control and customization. It allows switching between author mode (styles specified by the web designer) and user mode (styles set by the user in the browser preferences) with just one click of a button.

Learn how to change browser settings in the User Control section.

Example:

This experiment only works if your browser supports stylesheets and you are using the default settings in your browser.

This page with alternative style sheet.

This page uses a stylesheet where the background colour has been changed to black, text colour to yellow, link and visited link colours have also been modified and the font size has been increased by 20% - as preferred by some visually impaired users. You can apply these settings in the preferences of most browsers, if the design of the site allows it.

More fun with style sheets: Play with the W3C Core Style Sampler .

Ensure pages work without style sheet

It is important to ensure that pages are still readable without the style sheet. Older or text-based browsers do not understand style sheets. They will simply ignore these instructions and render a page in its simplest form using only the logical, structural mark-up of the HTML document. [See: Structural mark-up]

In fact, this is the reason why the use of style sheets is recommended. By sticking to clean structural mark-up and by keeping presentational styles out of HTML documents we can ensure that pages can be read using the most basic of technologies. They will be accessible on small displays and even with the help of assistive technology that has to translate web pages into another form (e.g. speech output or output to a braille printer).

Testing for style sheet independence

You can test what a page looks like without the external style sheet by temporarily disabling it. Put an exclamation mark right after the opening bracket of the LINK tag and then look at your page in a browser.

<!link rel="stylesheet" type="text/css" href="style.css">

Example:

This page without style sheet.

Site maintenance

Style sheets also have the advantage that they simplify site maintenance. The same instructions can be applied to several or all pages. Changes only have to be made in one document, the style sheet, instead of every page of the website.

How to

Styles can be applied directly within an HTML page ('inline') but it is best to create a style sheet as a separate ('external') document.

Example:

Give the file a name ending in .css (e.g. "style.css") and add the following to the <head></head> section of each page you want to apply the style sheet to:

<link rel="stylesheet" type="text/css" href="style.css">

In the style sheet (style.css):

body { font-family : Arial, sans-serif; color : #000000; background : #ffffff; } h1 { color : #ff0000; text-align : center; } .margin { margin-left: 10%; margin-right: 10%; }

The first set of instructions (body) specifies that everything within the <body></body> tags will be displayed in Arial or another available sans-serif font, in black text on white background.

The second set (h1) will render the contents of all <h1></h1> tags in red and align it in the center of the page.

The third (.margin) specifies a so-called 'class' that can be applied to most tags:

In the HTML document:

<p class="margin>This whole paragraph will be indented by 10%.</p>

CSS layout :

As W3C recommendations become accepted as standards by the web developer community, layout tables are slowly being replaced by CSS layout. According to these recommendations tables should only be used for data, not to lay out content, navigation, header and footer. Using CSS instead ensures that a page transforms gracefully ^[?] in older browsers, text-only browsers, some assistive user agents and on small devices, making web pages universally accessible.

Interested? Start with this article at A List Apart: Practical CSS Layout Tips, Tricks and Techniques .

Links to more tutorials and to templates reservoirs can
be found on the resources page.

Don't abuse CSS

Do not use CSS styling as a substitute for proper structural mark-up. Using instructions in style sheets to make normal text look like headings or emphasized text is as wrong as using the now obsolete font tag.

For details check this article: CSS accessibility problems: is markup dead?

Learn more

Some good examples and instructions on how to specify fonts and colors, add margins to paragraphs, control white space, add borders and much more, can be found in this helpful article: Adding a touch of style , by Dave Raggett from the W3C ^[?]

An excellent CSS tutorial can be found at w3schools.com .

WebReview.com's Style Sheet Reference Guide

Web Design Group: Cascading Style Sheets (tutorials, references)

[Back]

| Previous || Table of Contents || Next |