Linked Style and the Cascade

One challenge many Web designers and developers new to CSS face is to understand the various facets of the Cascade. The Cascade is a hierarchy of application and provides us with rules to both apply CSS in a hierarchical fashion if we so decide to do so and to help us resolve conflicts that might appear within our styles.

In recent articles, I’ve covered the various types of style sheets, including user, author, and browser, and then reviewed the primary author styles: inline, embedded, and linked. I discussed what the Cascade offers in terms of how it applies styles in this hierarchical fashion. What I haven’t yet discussed is the use of multiple linked style sheets in a given document, why this can be helpful, and how the Cascade applies in the instance of multiple style sheets and multiple conflicting rules.

$2.89
- OR -

Overview

Why Multiple Linked Style?

Linked style sheets are the holy grail of style, providing us with numerous benefits including improved document management and workflow. When we place our styles in an external style sheet, we have to go one place to make changes to our style, then save the .css document and sit back and relax while every document linked to that style sheet – even if it’s a million or more documents – updates to those styles.

Without this benefit, we’d have to go into the individual hard-coded pages and make the changes which would be extremely time-consuming and not at all cost-effective, not to mention tedious. Another option would be to perform a mass search and replace. More efficient perhaps, but the risk of introducing errors into pages with that technique is increased meaning stuff on your site might break. We’re back to frustration and wasting our precious time.

Given the benefit of one linked style sheet, why would using more than one be beneficial? It depends on the case scenario in point. For some sites, one style sheet is going to be sufficient to manage all the layout and style needs. However, on certain types of sites, using multiple sheets becomes a brilliant means of extending the document management benefits available.

Case in Point One: University

A great case in point as to when to use multiple styles comes about when we examine case scenarios based on real-world environments. Consider the following scenario. A major University is building a large web site. The University has determined that the site is to have a uniform layout, with the University logo in the upper left corner a navigation bar along the top horizontal area, and a news box to the left, with the full content area to the right (Figure 1).

molly holzschlag

molly holzschlagCoined "one of the greatest digerati" and deemed one of the Top 25 Most Influential Women on the Web, there is little doubt that in the world of Web design and development, Molly E. Holzschlag is one of the most vibrant and influential people around. With over 25 Web development book titles to her credit, Molly currently serves as Communications Director for the World Organization of Webmasters.

As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. She also teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column, Integrated Design, for Web Techniques Magazine for the last three years of its life, and spent a year as Executive Editor of WebReview.com.

See All Postings From molly holzschlag >>

Reviews

Conflicting Styles

September 9, 2005 by S. O.
I paid $2.99 to resolve a problem. This article merely outlines the problem and then suggests CONFLICTING RESOLUTION IN CSS:SPECIFICITY. Why do I need to make an additional purchase? The fact that styles CAN have a conflict is well know. I wanteded an ANSWER!!!

You must me logged in to write a review.