This chapter is from the book
This chapter is from the book
This chapter is from the book
Understanding the Cascade
The topic of this hour is Cascading Style Sheets, not just Style Sheets. Cascading refers to which styles and attributes take precedence over other styles. For instance, if you define paragraph text as the color blue by redefining the paragraph tag and then add a class selector to one of those paragraphs that defines the text as red, what color will the text appear in the browser? The rules of the cascade are what controls style precedence.
The CSS standard defines a complicated hierarchy of style precedence dependent on the style's proximity to the object it's applied to, the type of style, and when the style loads. You can simply remember a couple rough rules of thumb to help you predict style precedence:
- The closer the style definition is to the object, the more dominant it is. Therefore, style properties defined in a web page override a conflicting style defined in an external style sheet.
- The type of selector matters. In order of most dominant to least dominant, the selector hierarchy is id selector, class selector, and element selector. Properties contained in a redefined HTML tag will lose to conflicting properties defined in a class or id selector.
- A defined style is dominant over an inherited style.
The last rule of thumb in the list refers to inheritance, which is another element of the cascade. You'll understand more about nesting HTML tags after you've read Hour 7. Web pages consist of elements nested within other elements. For instance, everything in the page nests within the body tag. So, if you redefine the body tag to have a certain background color, do all the tags (such as paragraphs, tables, and images) inherit that background color? CSS wouldn't be very useful if that happens.
Some properties are inherited, though. When you use the Page Properties command (Modify, Page Properties) to modify the font and color of the text, those properties are inherited by all the text on the page. Dreamweaver enables you to view the cascade of properties applied to a selected element using the CSS Styles panel. Figure 6.16 shows the CSS Styles panel with the Show Cascade of Rules for Selected Tag button selected. In this example, some Heading 3 text is selected on the page and it inherits all the body attributes listed in Figure 6.15. The CSS Styles panel shown in Figure 6.17 shows that the Heading 3 text does not inherit the background image property from the body tag; notice that it is crossed out.
){kind=link}
)
Figure 6.16 The CSS Styles panel can also display the cascade of styles applied to a certain element on the web page.
)
Figure 6.17 Properties not inherited by the current element selected in the web page are shown with a line through them.