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

Creating the external style sheet

There are several ways to create an external style sheet in Dreamweaver. In this tutorial, you will use the Plus (+) button on the CSS Styles panel:

  1. If the CSS Styles panel is not open, choose Window > CSS Styles to display it.
  2. Click the Plus (+) button to open the New CSS Rule dialog box (see Figure 1).
  3. Select Advanced as the selector type, so you can use group selectors.
  4. Type the group selector body, h1, h2, h3, h4, p, ul, li in the Selector field. (Separate each selector by a comma and a space.)

  5. Make sure the Define In option is set to New Style Sheet File. One of the two Spry style sheets is selected by default, so you'll need to use the popup menu to access New Style Sheet File.

    The New CSS Rule dialog box

    Figure 1. The New CSS Rule dialog box

  6. Click OK.
  7. A navigation dialog box opens. Browse for the Blimey site you developed in Part 2 of this tutorial, or use the starter files in the support_files folder for this tutorial.
  8. Name the new style sheet blimey.css.
  9. Click OK. The CSS Rule Definition dialog box opens (see Figure 2).
  10. Select Box from the Category list.
  11. Leave the Same For All option selected for both Padding and Margin, and type 0 for both.
  12. Click OK.

CSS Rule Definition dialog box

Figure 2. CSS Rule Definition dialog box

This procedure writes the first rule to an external style sheet and attaches it to the current page.

This rule may strike you as odd. If you are new to CSS layouts, you may not know that before you apply a single rule to your page, there is already a browser style sheet that affects its display. Many elements have default values; such as those you added to the group selector. These values vary from browser to browser and thus lead to differences in the layout when you add your own values. By zeroing out these elements, you give your layout a consistent starting place for the values in your own style sheet. Many developers reset many more elements, and sometimes include other properties such as borders set to none. To learn more about browser style sheets and how to reset them, you can read the following articles by Eric Meyer:

Note: If you need to edit a rule after you have closed its dialog box, simply select it and click the Edit Style button (the pencil icon) at the bottom of the CSS Styles panel. You can also edit properties and values directly in the Properties section of the CSS Styles panel.

Page 2 of 12
Previous Page
Next Page