Random ramblings from a random rambler
Section 04
Cascading Style Sheets
In the previous section, we introduced the basic concepts of CSS: Its rules, selectors, and how to incorporate CSS into a web page. This section we really dive into the cascade, examining the intricacies of CSS.
But first we step back and revisit how the browser parses XHTML into a family tree affectionately known as the DOM (Document Object Model). It is upon the members of this family tree, the individual XHTML elements, on which CSS operators. We learn that through a variety of CSS selectors, we can dole out styles to any element or combination of elements we want. And through the concept of inheritance, we explore how these styles can apply to either parent or child elements or more often than not, both.
We then identify the various sources of style sheets including the browser’s internal style sheets, those provided by the reader, and finally those we, as web developers, author ourselves. We also revisit how CSS can be embedded in elements, web pages, and separate files. With so many sources and so many ways to select XHTML elements, we soon discover there’s plenty of room for one rule to conflict with another.
Behold the power of the Cascade, which determines how one CSS rule is chosen over another. We break the cascade down into its fundamental parts–the source of a rule, the specificity of a rule’s selector, and the order in which a rule–and show how each part plays a critical role in resolving conflicts. It’s a daunting task at first, especially when we learn that math can be involved, but the ultimate lesson is this: The more we deal with the Cascade, the easier it is to navigate.