Conflict Resolution (What does 'Cascading' mean anyway?)

With all of these different ways to specify what elements should appear like, how does the style sheet engine determine which declaration wins if more than one declaration could apply to a given element?

The answer is in the title of the specification we've spent so much time discussing in this chapter: Cascading Style Sheets. In a nutshell, the title indicates an important and special property about style sheets, which is that if more than one style attempts to format an element at the same time the style that actually formats the element will be determined based on a concrete set of rules.

Specifying Your Own Style Sheet

There's one other source of style sheet information that we haven't considered yet. In addition to the different styles we can specify in the source of our page or in a linked style sheet, the browser user can also define their own style sheet. In general the values in this sheet will be overridden by any style values in a page. The rationale behind this practice is that any style information in a page is important enough to display, but pages without style sheets can still be prettied up by following user preferences.

Setting a default style sheet is easy to do with Internet Explorer 4.0. Select the Internet Options menu item from the View menu, and then click on the Accessibility… button. In the Accessibility dialog, check the Format documents using my style sheet checkbox and fill in the path or use the Browse… button to specify the location of your own personal style sheet.

Rendering the Page: Resolving Style Conflicts

When a style sheet enabled browser downloads a page it runs through the following steps to determine which (if any) style information should be used to format each element:

Parse the page and consider all elements. If an element (including its parents) contains no style information, then use the user defaults that were set via style sheet or browser options. If parent elements contain style information use this data instead of the default values.
If a conflict exists, the values are sorted again so that values set by the author of the page rank higher than default values set by the browser user.
If we still have not resolved all conflicts, sort the values by their specificity to the situation. A value that applies only to the situation at hand will override a value that applies in a more general case.

With the information from this section (and the style sheet reference, section F, in the back of the book) you can write HTML pages that look great because they contain specific formatting and layout information.