TIP 122: Viewing the Cascaded Style Info

Cascading Style Sheets (CSS) are an amazing technology that can make life much easier for a Web designer. Then again, they can make you pull your hair out with frustration and confusion. When you're dealing with multiple complex style sheets, it can be hard to keep track of how all the style properties cascade and inherit to render the final results.

Changing the Active Element

To evaluate the cascaded style info of other items on the page, select a different element or style from the menu in the top right corner of the CSS Palette.

To help you keep everything straight, the CSS palette includes an innovative new feature that shows you the complete CSS style information of your selection in the Layout Editor. Make a selection in the Layout editor and open the Style Info tab of the CSS palette (Figure 122). This information will help you understand the effect of the inheritance and cascade of the styles on your selection.

Figure 122. The Style Info section of the CSS palette shows the complete final cascade and inheritance of the selection in the Layout Editor.

For example, the cascade rules of CSS determine that if an external style sheet says captions are red, but an internal style says captions are blue, then the internal definition "wins," and the captions will be blue.