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:
- Allows you to control the layout of the entire site with one file.
- Changes affect all documents at the same time.
- Can eliminate redundant in-line styling (Font, Bold, Color, Images)
- Provide multiple views of the same content for different types of users.
Cons:
- Older browsers may not be able to understand CSS.
- CSS is not supported by every browser equally.
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: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.
