AIR University 2004: Cascading Style Sheets (CSS)

Introduction

This two-hour AIR University course, taught by Jim Allan and James Craig, will be a step-by-step build of an accessible CSS style sheet, starting with a valid and semantic HTML document (Example 1) worked through to a final solution based on an original design mockup image. The CSS handout (PDF) is also available.

Supporting images used in this design can be downloaded individually though the following links, or as part of the entire set of example files (ZIP).

• Header title text and transparent header text (for discussion)
• Header background rule
• Navigation divider (colon character)
• Sidebar gradient background

Examples

1. Example 1

   Initial file discussion topics will include semantic markup, validation, and keyboard “skip” links. CSS precautions from Jim Allan and how current screen readers “see” content.

2. Example 2

   Default body styles, accessible font sizes, and absolute positioning.

3. Example 3

   Basic block-level styling and simple background images. Will discuss alternative methods for styling (in this instance, using border styles instead of a background image) and why not to include content in background images.

4. Example 4

   Styling navigation lists. Floats, margins versus padding, basic box model properties, CSS2 pseudo-classes (active/focus, first-child/last-child, etc.) and alternative downgrading for Internet Explorer.

5. Example 5

   CSS positioning, absolute versus floated, scalable widths and margins, Internet Explorer’s box model flaw (See Eric Meyer’s diagrams on the correct box model and the IE5 box model, also Rendering Mode). We will also discuss positioning relative to an ancestor element’s position versus positioning relative to the browser viewport.

6. Example 6

   More use of background image techniques.

7. Example 7

   Discussion of how an element’s font-size affects its em-sized positioning, font size inheritance.

8. Example 8

   Accessible styling of form elements, refinement of content styles, more on padding versus margin, max-width.

9. Example 9

   Pros and cons of image replacement: inaccessible methods (FIR), partially-accessible methods (LIR), and mostly-accessible methods.

10. Example 10

    Hiding styles from buggy browsers. Moves styles to an external style sheet.

11. Final Solution

    Overcoming the Flash of Unstyled Content (FOUC) in Internet Explorer. Adds a simple style sheet for legacy browsers.