Section B.5. Examining Your CSS in the Styles Panel | Dreamweaver CS3: The Missing Manual

B.5. Examining Your CSS in the Styles Panel

As you read in Chapters 4 and 5, inheritance and the cascade are two very important CSS concepts. Inheritance provides a way of passing on common properties like a font color to descendents of a styled tag. Giving the page's <body> tag a font color, causes other tags inside the page to use (inherit) that same font color . The cascade is a set of rules for determining what a Web browser should do if multiple styles apply to the same tag and there are conflicts between the two styles. The cascade helps decide what to do when one style dictates that a particular paragraph should be displayed in 24-pixel type, while another style dictates that the type should be 36 pixels tall.

B.5.1. Current Selection Mode

With all this inheritance and cascading going on, it's very easy for styles to collide in unpredictable ways. To help you discern how styles interact and ferret out possible style conflicts, Dreamweaver 8 includes another view of the CSS Styles Panel (see Figure B-13). When you click the Current button, the panel switches to Current Selection mode, which provides insight into how a selected item on a pagean image, a paragraph, a tableis affected by inherited styles.

Tip: You can also switch the CSS Styles Panel into Current Selection mode by selecting text on a page, and then clicking the new CSS button on the Property inspector. Doing so also opens the CSS panel, if it's closeda nice shortcut. If the button's grayed out, then you're already in the right mode.

This is really an incredible tool that's invaluable in diagnosing weird CSS behavior associated with inheritance and cascading. But like any incredible tool, it requires a good manual to learn how it works. The panel crams in a lot of information; here's a quick overview of what it provides:

A summary of style properties for the currently selected item in the Summary for Selection pane . Remember that whole thing about how parents pass on attributes to child tags, and how as styles cascade through a page, they accumulate (which means it's possible to have an <h1> tag formatted by multiple styles from multiple style sheets)? The Summary for Selection section is like the grand total at the bottom of a spreadsheet. It tells you, in essence, what the selected elementa paragraph, a picture, and so onwill look like when a Web browser tallies up all of the styles and displays the page.
The origin of a particular property is displayed in the About pane (Figure B-13, top). If a headline is orange, but you never created an <h1> tag with an orange color, then you can find out which style from which style sheet is passing its hideous orangeness to the heading.
A list of styles that apply to the current selection appears in the Rules pane (Figure B-13, bottom). Since any element can be on the receiving end of countless CSS properties handed down by parent tags, it's helpful to see a list of all the styles contributing to the current appearance of the selected object on the page.
The order of the cascade in the "Rules" pane (Figure B-13, bottom). Not only are styles that apply to the current selection listed, they're also listed in a particular order, with the most general style at the top and the most specific ones at the bottom. This means that when the same property exists in two (or more) styles, the style listed last (furthest down the list) wins.

A few examples can help demonstrate how to read the CSS Style panel when it's in Current Selection mode. Figure B-13 shows the CSS properties affecting a selection of text (in this case, a paragraph) on a Web page. The Summary for Selection pane lets you know that if you viewed this page in a Web browser, this paragraph would be displayed in bold using the Georgia type-face, at a font- size of 1.5ems with 150 percent line-height (space between each line of text). When you select a property from the Summary for Selection pane and then click the Show Property Information button (Figure B-13, top), the About pane displays where the property comes fromin this case, that property belongs to the <p> tag style which is defined in the internal style sheet of the file index.html .

Figure B-13. The two viewsProperty Information (top) and Cascade (bottom)of the styles panel are mostly the same. Both show a summary of properties that apply to the current selection; they also both display the Property list pane (see Section B.1.1) used to edit those properties. The Property Information view shows which style and which style sheets were used in defining a property. In contrast, the Cascade view shows a list of all styles (rules) that the current selection inherits from.

You've seen the bottom pane before. It's the Properties pane, and it's used to delete, add, and edit the properties of a style (see Section B.1.1). You simply click in the area to the right of the property's name to change its value, or click the Add Property link to select a new property for the style. Notice that in this example, the Properties pane contains fewer properties than the summary view. That's because it displays only properties of a single style (the <p> tag style), while the Summary view shows all properties inherited by the current selection.

Tip: Sometimes one or more of the three panes are too small for you to be able to see the information displayed. You can use the gray bars containing the panes' names (circled in Figure B-13, bottom) as handles and drag them up or down to reveal more or less of each pane.

B.5.2. Deciphering the Cascade

Clicking the Show Cascade button (Figure B-13, bottom) reveals a list of all styles that affect the current selection. In this case, you can see that two tag stylesone for the body tag and one for the p tagcontribute to styling the selected paragraph of text. In addition, as mentioned above, the order in which the styles are listed is important. The lower the name appears in the list, the more "specific" that style isin other words, when several styles contain the same property, the property belonging to the style lower on the list wins out (see Section 5.1.4 for more on conflicts caused by cascading styles).

The Properties pane provides even more information about conflicting properties. Figure B-14 shows that four styles are affecting the formatting of a single paragraph of text: three tag styles (<body>, <p>, and <p>) and one class style (.sidebar). Why two <p> tag styles? One is in an external style sheet, while the other belongs to the page's internal style sheet.

Clicking a style name in the Rules pane reveals that style's properties in the pane below. In the bottom-left image in Figure B-14, notice the sidebar class style has properties such as background color, text color, and so on. When a line appears through a property name (see the circled areas in Figure B-14, bottom middle and bottom right) that property isn't applied to the current selection. Either it's overridden by a more specific style, or it's not an inherited property.

The second-to-last style in the list in Figure B-14a <p> tag styleshows that it has a setting for the font-family property. In addition, there's a line through the property name, indicating that it doesn't apply to the current selection. Because the more specific .sidebar class style also has the font-family property set, in the battle of cascading style properties, .sidebar wins (see Chapters 4 and 5 for more on inheritance and cascading).

Tip: When you hover over a property name that's crossed out in the Properties pane, a pop-up window explains why the property doesn't apply. This is a big help, when a certain property setting (such as a font color) from a style isn't being applied to your selection. The pop-up window will explain which style it's in conflict with, providing you with the diagnostic information you need to go fix the problem.

If your Web pages are elegantly simple and use only a couple of styles, you may not find much need for this aspect of the CSS Styles panel. But as you become more proficient (and adventurous) with CSS, you'll find that this panel is a great way to untangle masses of colliding and conflicting styles.

Figure B-14. Selecting the Current view of the CSS Styles panel lets you view all the properties for your Web page's styles. A line (circled in these images) strikes out properties from a style that don't apply to the given selection on the page. In this example, the font-family in the second <p> style is overridden by the font-family property in the more specific sidebar class style (bottom row, middle). Likewise, the sidebar class also overrides the font-size, color, and margin-left properties in the top <p> style (bottom row, right).