Cascading Style Sheets

Overview

Cascading Style Sheets (CSS) are a great way to separate the structure of a web site from it's rendering style. What this means, is that with CSS developers have one file that designates the design of the entire site. CSS allows you to position items anywhere on the page with relative accuracy. This is an important factor when considering modern web deign layout and it's relationship to tables. Tables are often used for handling the layout of a web site. That is, developers often use tables to place items such as menu systems and headers within each page. This usage of tables can create many issues pertaining to web accessibility. Perhaps the best example of this is when a user is attempting to navigate a site using screen reader software. Screen Readers will read the contents of a table in a linear format. That is, from top to bottom and left to right.

When a site is designed with tables controlling the layout, more often than not, the layout is non-linear. This can make navigating the site very difficult or even impossible for many individuals. CSS allows developers to create the same kind of layout and appearance, but without using any tables. Where web accessibility is concerned, CSS is a very powerful ally. In this section, we will cover the pros and cons of using CSS. We will also examine portions of the style sheet used in this site.
 

Pros and Cons of CSS

Pros:

Cons:

In this case, the pros far outweigh the cons. In fact, if the site is designed in a specific way, older browsers will display the content much better (on average) than if the site were managed with tables.
 

How the Template System Uses CSS

The first thing to know about CSS, is that there are two ways to use it. The Template System uses a single, external sheet (scripts/all.css). This file holds all of our styles, and then each page calls to that file in order for the styles to be applied when the page is rendered in a browser. The other way to use CSS is to place styles inline. This means that individual styles are placed on each page using the <style> tags. This second method should be avoided, as the Technical Evaluation for Web Accessibility will find many issues with styles that are presented inline. The proper way to link to an external style sheet is to place the following inside the <head> tags on each page:
<link rel="stylesheet" type="text/css" href="scripts/all.css">
 

Examining the Style Sheet

Now we will examine some portions of the style sheet for this web site. Please continue to the CSS Source Code Section.
Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0  Valid HTML 4.01!  Valid CSS!
This File Was Last Modified: Friday September 05 2014