Using Contextual Styles

---

When used correctly, CSS offers incredible options for visual formatting just not possible with HTML. One of these options is the use of contextual styles — rules that apply only when a selector occurs in the context of a specific class of container. Using contextual styles requires a bit of forethought and planning to incorporate classes to create containers that serve as regions.

For example, the Habitat Alert site places the main content for each page into a large white area below the navigation buttons. Content added to this area is jammed up against the circle image to the left. You cannot add cell padding or spacing to the table, because it would affect the entire table. The only HTML solution is to alter the table structure to add a "spacer" or "gutter" column between the circle cell and the content cell. However, deciding to change the width of the gutter column would mean changing every page structurally.

On the CD-ROM 

Save the Habitat Alert36 folder from the chapter36_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

 Habitat Alert site   Leaving the table structure as is, you can use the CSS to set white space around the main content in the table cell. By creating a class to apply to the cell, you can define a new style for the size 4 heading and paragraph tags, used only when size 4 headings or paragraphs occur within any cell set to use the .maincontent class. Follow these steps:

1. Open the  index.htm page.

2. Add a new style to the  main.css external style sheet. Choose Make Custom Style (Class) and name the new class .maincontent. Click OK.

3. In the Style Definition dialog box, click the Background category and set the background color to #FFFFFF (White). Click OK.

   Note 

   Technically, you can create a class that contains no properties or values, which is useful when designing contextual classes. But Dreamweaver fails to write the new style if you do not choose at least one property with a value (which is why you added a white background). You can opt to edit your style after it is written to remove the property. Dreamweaver doesn't remove the style if you do this.

4. Click in the main content blank area (be sure your cursor is not in the text) and apply the new class. The easiest and most precise method of applying styles is to right-click (Control+click) the <td> tag in the Tag selector and choose Set Class ® .maincontent. You won't see any changes.

5. Now add a new style, this time choosing the Use CSS Selectors option to create a new style in the external style sheet ( main.css). Type .maincontent h4 in the Selector field and click OK. Leave the Style Definition dialog box open and continue with the next section.

Setting box margins

In Dreamweaver, the margin property is located in the Box category. Of the several ways to add white space around page elements, the most supported method to use is a margin. Every element has a margin. With Cascading Style Sheets, you can control the top, right, bottom, and left margins separately. Netscape 4x browsers offer limited support for the margin property for some elements. To set the margins, follow these steps:

1. In the Style Definition dialog box, set the Type properties for maincontent size 4 headings to as follows:

   Size: 12px

   Weight: Bold

   Color: #999900, a light-golden green.

2. Click the Box category and uncheck the Use Same for All option over the Margin settings. Add the following margins; then click OK.

   Top: 0

   Right: 20px

   Bottom: 0

   Left: 20px

3. Click OK to close the dialog box. Figure 36-7 shows the settings used in the Box category. Your headings move away from the left edge of the table cell (Figure 36-8).

   
   Figure 36-7: The settings used in the Box category

4. Use the same approach to control the margins of maincontent paragraphs. Add a new style, using the Use CSS Selector option. Type .maincontent p into the Selector field.

5. Set the font size to 11px; then click the Box category and set the margins as follows:

   Top: 0

   Right: 20px

   Bottom: 10px

   Left: 20px

   
   Figure 36-8: The properties for the head 4 titles applied to the maincontent style

6. Click OK and save your page. Preview it in your target browsers to see how the styles affect the presentation of the main content. With room around the content, it is much easier to read, as shown in Figure 36-9. And because you used CSS to control the margins, simple edits to these two contextual selectors reset values for every page using this style sheet.

   
   Figure 36-9: Margin around the content in the maincontent cell makes the page easier to read.

---