Using Dreamweaver to Understand Rules

I have described the new user interface features available in Dreamweaver 8, but let’s use these features to explore what you have created.

1. In the document window, click in the pink sentence.
2. In the CSS Styles panel, click the Current button. Remember, the Current category helps us explore the rules affecting whatever is currently selected.

3. Organize the sections of the CSS Styles panel like the screen shot below. In particular, the contents of the Rules category may not be visible until you drag the Properties category down in the panel group.

   

   Figure 16. Using the Current mode to explore the rules you have created

4. In the Summary section, the listing includes properties defined in a couple of rules: the font-family and font-size properties are defined in the P tag and the color property is defined in the .hilite_text class rule. Yet the display in the Summary section makes no note of those differences. The section merely describes which properties affect the place where your cursor is placed. Click each line in the Summary section to see how the display in the Rules and Properties sections change.
5. The Rules section lists the cascade of rules affecting the selection. In fact, because of this listing, we can see that the properties defined in the body rule (such as the font-family and font-size properties) are countermanded by the properties defined in the P rule, and properties (such as the color property) defined in the P rule are countermanded by properties defined in the .hilite_text class rule. Click the Show Information button in the top right corner to see how the About category works.
6. In the document window, click in the text that was created automatically when we created the DIV tag. Notice this text is smaller and gray.
7. Look in the CSS Styles panel to notice the font-family, font color, and font size. Then click each line to see in the About category where that property is defined.
8. Click in the text contained in the DIV tag again, then choose Paragraph from the Format pop-up menu in the Property inspector. Note the text appearance has changed.
9. Refer back to the CSS Styles panel to see where those font properties are defined.

Now that you are comfortable with the information you can get in the CSS Styles panel, let’s actually use the panel itself to create some style properties.