Accessibility

Table of Contents

  1. Introduction
  2. Familiar features
  3. Workflows to highlight features
  4. Investigating the CSS styles of this page
  5. Move styles and style properties among files
  6. Migrating development styles to the rest of your site
  7. Check your CSS decisions

Overview of CSS features in Dreamweaver CS3

Investigating the CSS styles of this page

The steps below highlight some of the features of the CSS Styles Panel while investigating the CSS styles pre-defined for this page. I undocked the CSS panel group while creating the screenshots.

Reviewing the styles

The CSS style sheet and HTML page rely heavily on "container" DIV tags that are styled according to the ID property of the DIV tag. To see what I mean, click the All mode in the CSS Styles panel.

New Document dialog box

Figure 4. The All mode of the CSS Styles panel provides a snapshot of how the styles are defined

  1. In the Design view of cs3.html, click in the word Header (the same word highlighted in Figure 4).

  2. With the All mode chosen in the CSS Styles panel, click .oneColLiqCtrHdr #header.

    Note: this style definition applies only to an element with an ID of "header" contained within another element to which the class ".oneColLiqCtrHdr" has been applied. The Properties sheet below the rule list shows the following attributes:

    • Background: #DDDDDD
    • Padding: 0 10px 0 20px
  3. Click to highlight the #DDDDDD in the Properties sheet, then replace it by typing #CCBBBB. The box containing the word "Header" now looks purplish.

  4. Click .oneColLiqCtrHdr #header h1.

    Note: this style definition applies only to an H1 tag within an element with an ID of "header" contained within another element to which the class ".oneColLiqCtrHdr" has been applied. Yeah, it’s easier to decipher in the CSS Style panel.

  5. Click the Add Property link in the Properties sheet.
  6. From the drop-down menu, choose the color property.
  7. Click the color box and choose #330000 (dark purple along the top row of colors).

Let’s see what we’ve changed. By this time, the CSS file should already be open in Dreamweaver. Because the change we just made affects the code of the CSS file, Dreamweaver opens the file and shows its edited status by appending an asterisk to the file name.

  1. Click the .oneColLiqCtrHdr #header h1 rule in the CSS Style panel.
  2. In the Properties sheet, right-click (Windows) or control-click (Mac) the color property we just added to that rule.
  3. Choose the Go to Code menu item. Selecting this opens oneColLiqCtrHdr.css to the color property we added to .oneColLiqCtrHdr #header h1.
  4. Type the following CSS comment code to the end of the line describing the color property: /* used to reinforce the color scheme considered for the page */.
Page 4 of 7
Previous Page
Next Page