Accessibility

Table of Contents

  1. Introduction
  2. Creating the external style sheet
  3. Writing the body rule
  4. Writing the container rule
  5. Creating rules for Module 1, the header div
  6. Creating rules for Module 2, the masthead div
  7. Creating rules for Module 3, the page content
  8. Creating rules for Module 4, the footer
  9. Ordering the style sheet
  10. Using the Spry Accordion styles
  11. Using the Tabbed Panel widget
  12. Checking browser compatibility

Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS

Writing the body rule

The next rule you will write is for the body element:

  1. Click the Plus (+) button to open the New CSS Rule dialog box (see Figure 3).
  2. Select Tag as the selector type.
  3. Type body in the Tag field.
  4. Make sure the Define In option is set to blimey.css. (From now on, assume that all rules are defined in this external style sheet.)

  5. Click OK.

    Settings for the body rule

    Figure 3. Settings for the body rule

  6. Select Type from the Category list in the CSS Rule Definition dialog box (see Figure 4).
  7. In the Font pop-up menu, select a sans-serif list such as one that begins with Arial or Verdana.
  8. In the Color field, click the color picker and set the color to #333333 (dark gray).
  9. In the size field, type 100 and choose % as the unit of measurement.
  10. Click OK.

CSS rule definition for the body type

Figure 4. CSS rule definition for the body type

Note: The settings in Figure 4 instruct the browser to display the text at 100% of whatever the user has set in the browser preferences. For example, someone with impaired vision may have changed the browser preferences from the default font size of 16 pixels to 18 pixels or higher. In later exercises, you will scale other text such as h1 and p from that user setting. By setting the body to 100% of the user's browser font size, all future font sizes will scale from that starting point. For example, if you later set the paragraph font size to 85%, it will be 85% of the user's font preference, whether that is 12, 14, 16, 18, or more pixels.

Page 3 of 12
Previous Page
Next Page