Creating Accessible CSS
Overview of Cascading Style Sheets (CSS)

Article Contents

  1. Page 1: Overview of Cascading Style Sheets
    1. Introduction
    2. What Are Cascading Style Sheets?
    3. Why Do They Call Them "Cascading"?
    4. The Issue of Control
  2. Page 2: Using CSS to Your Advantage
  3. Page 3: CSS Pitfalls

Introduction

For years, the only way to format HTML in a visually appealing way was to use tables, even though tables were originally created to display tabular data. As the web evolved and became more sophisticated, designers wanted to do more than just display text, they wanted to emulate printed documents. They wanted to make an artistic statement. There's nothing wrong with that. In fact, tables can be used for layout without ruining the accessibility of a web site. Yes, it's ok to use tables for layout, at least from an accessibility perspective.

Still, you can take your web design to a higher level by eliminating tables that are used for layout. The way to do this is through CSS (Cascading Style Sheets). Before going too far, it should be noted that authors can easily create INaccessible web sites using CSS. There is nothing magical about CSS that eliminates accessibility barriers.

Important

The strength of CSS lies in the ability to separate content from presentation, and to allow for more precise control over layout.

What Are Cascading Style Sheets?

Cascading Style Sheets, or CSS, allow you modify properties of existing HTML elements. All web browsers are based upon a built-in style sheet. This style sheet is part of the program and is not typically viewable. It instructs the browser how to display individual items or elements in your page. For instance, when the browser sees the <p> tag, it knows to skip a line and start a new section because that's what the built-in style sheet instructs it to do. The <strong>, <table>, and every other HTML tag is defined in this style sheet; their size, color, position, and other characteristics are all defined within it. When you add your own style sheet to a web page, you can override this built-in style sheet and tell the browser to display elements in a different way, according to your style sheet.

Although most tags allow you to add attributes to them to give them certain characteristics (e.g., color="red"), with style sheets you have increased flexibility and the capability to add several attributes that are not available with normal HTML. One advantage of styles sheets (or just 'styles' for short) is that you don't have to add extra attributes to individual elements, instead, you can define a style for that element to achieve that attribute every time that particular element is used. So, if you want all of the paragraphs on your page to be a certain size, you don't have to use the <font> element in every paragraph. Instead, you tell the web browser that every time it encounters a <p> to display it the size you want. Also, styles are easy to edit and change; instead of finding and editing each occurrence of an HTML element, you may change the style that was defined for that element and all occurances of the element in the web page (or entire web site) will be changed.

Why Do They Call Them "Cascading"?

The word "cascading" applies to a hierarchy of importance. The user has the highest level of control. By applying a user-selected style sheet, the user has complete control over the styles of the web page. The next level down in the hierarchy is in the document itself. If a style is applied to an element, this takes precedence over any other style declaration (except for the user's own styles). Further down in the hierarchy are styles specified within the <head> of a single page. Finally, there are styles specified in external documents - these can be applied to multiple pages or an entire site.

illustration of the cascading effect of style sheets, as explained in the text

Also, if you declare a style for the same element more than once, it is the last style that will be applied. Take a look at the same style attributes below:

h1 {color:red; background-color:yellow;}

h1 {color:blue; background-color:red;}

h1 {color:white; background-color:black;}

In this example, there are three separate color combinations for the <h1> tag. The first two color combinations will be ignored. Only the last one will be applied. The last one in the cascade trumps all others.

The Issue of Control

The fact that the end user has the greatest control over the styles of a web page is an accessibility benefit. This means that a person with extremely low vision can set the background color of all web pages to black, and the font to 300% bold white text—or any other style that best fits the needs of that individual. Some designers are reluctant to give up any of their control over the look and feel of their creations. The truth is that they never had this control to begin with. The web is an electronic format. People can view it in any browser that they choose, and they can manipulate it as much as they like.

You're probably used to seeing the Google web site like this:

screen shot of the Google home page

However, if you view Google in a text-only browser, it might look something like this:

screen shot of text-only browser--there are no images or formatting--the background is blue and the font is white

When it comes right down to it, the idea that web developers have control over the display of their content is an illusion. The final look and feel has always been in the control of the user. With style sheets, this control only increases. Rather than fight it, web developers should just accept this fact and make sure that their documents transform well.

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University