Working with the CSS Styles Panel

The CSS Styles panel (Window > CSS Styles) shows all the styles affecting a document or a selected style. You can apply, modify, delete and do other style- related tasks right in the CSS Styles panel without having to open the CSS Rule definition dialog. If you need an overview of what's where in the panel, look back at the "Anatomy of the CSS Styles Panel" sidebar, earlier in this chapter.

To work in All mode:

1.	In your document, click All at the top of the CSS Styles panel (Figure 5.24). All the styles affecting the document appear: any linked or imported external style sheets as well as any styles in only the open document. An external style sheet is indicated by a file name , for example, hiking .css . Styles internal to this document only are in the <style> category. Figure 5.24. When you're in All mode in the CSS Styles panel, any external style sheets are listed by file name, while internal styles are shown in <style> . Click the plus ( + ) (Windows) or the disclosure triangle (Mac) to expand a category if it isn't already expanded. Advanced Terminology Advanced selectors are extremely powerful, so specific vocabulary exists to describe them. Pseudo-classes are so named because pseudo-states don't actually exist in the document. The user must do something to create the pseudo-class, such as visit a link, hover over a link, or even hover over a visited link. Comma-separated lists of selectors ( p , td , li ) are called group selectors. Selectors such as #nav li or #content p are known as contextual selectors (or descendant selectors). These selectors are the workhorses of CSS because they allow you to write specific rules for text based on the element in context (or the element from which it descends). The selector #content p styles only the p elements in the #content div. The selector #footer p styles only the p elements in the #footer div. So while you may have paragraphs in your content area and paragraphs in your footer area, there is no reason why they have to share the same presentation rules.
2.	Examine the rules for individual styles by highlighting a specific style and doing one of the following: Click the Show category view icon at the lower-left of the CSS Styles panel . Properties for the selector appear in categories in the Properties pane at the bottom ( Figure 5.25 ). Click the plus ( + ) or the disclosure triangle (Mac) to expand any category. Figure 5.25. Expand a style sheet name to see all the style rules. The Category view of the Properties pane shows categories, which must be expanded to examine properties. or Click the Show list view icon at the lower-left of the CSS Styles panel . Properties for the selector appear as a list in the Properties pane at the bottom ( Figure 5.26 ). Figure 5.26. Pick a specific style from the list and its properties are shown in the Properties pane. In List view, the Properties pane shows a list of all the properties for a selected style. or Click the "Show only set properties" icon at the lower-left of the CSS Styles panel . Set properties for the selector appear in the Properties pane ( Figure 5.27 ). Figure 5.27. In Show only set properties view, the Properties pane eliminates everything from view except the set properties for the selected style.
3.	To add a new property directly in the CSS Styles panel, click the icon for "Show only set properties" , then click Add Property. An editable field appears with a pop-up menu listing every possible property ( Figure 5.28 ). Figure 5.28. To set a new property while in the Property pane, choose from the list.
4.	To modify a property, click on the property value. An editable field appears ( Figure 5.29 ). Type any change and press Return (Enter). Figure 5.29. Any property value is editable in the Property pane.

To work in Current mode:

1.	In your document, do one of the following: Place the cursor in an element in the document window. or Select an element using the tag selector at the lowerleft of the document window ( Figure 5.30 ). Figure 5.30. Elements you want to style can be selected in the document window with the tag selector.
2.	Click Current at the top of the CSS Styles panel ( Figure 5.31 ). The Summary for Selection pane appears. Figure 5.31. Current mode focuses on only the currently selected style.
3.	In the middle pane, you can choose whether to show information about the selected property (About, Figure 5.31), or show the cascade of rules for the selected tag (Rules, Figure 5.32 ). Click on a property highlighted in the Summary for Selection list, and then choose either the About or Rules button on the right. Figure 5.32. You can see information about the selected property, or see the cascade of rules that apply to the selected tag. At the bottom, the Properties list shows the properties and their values.
4.	If properties for the selected element were overridden by rules for other selectors, Dreamweaver indicates this with a strikethrough of the property name ( Figure 5.33 ). Use the mouse to hover over the property showing a strikethrough and a pop-up tip appears explaining why this property is not applied. Figure 5.33. In Current mode, you can see inherited styles affecting a selector. The style is shown with a strikethrough if it doesn't apply to the current selection.

Tips

• Verify how styles are implemented on your pages by previewing them in a variety of browsers. More than one style rule can affect a particular page element. Sometimes the style rules conflict and you get unexpected results.

• When things don't look as expected in the browser, troubleshoot style rules using Current mode in the CSS Styles panel. The Properties pane provides valuable help to spot style conflicts.

• Inheritance information in the About pane of the CSS Styles panel in Current mode is also useful when troubleshooting conflicting style rules.