Explaining the "Cascade" Part of CSS

With the push for accessibility and ease of maintenance across the web today, there are few technologies that truly offer the same return on investment as implementing cascading style sheets (or CSS) within your site. Whatever your end goal for using CSS, an appropriate understanding of how the cascading element of the technology works is the key to leveraging it to its fullest potential. Many people seem confused by the cascading nature of the style sheets, so let’s take a few minutes and examine how they work. Once you have an understanding of the inner workings of the technology, you can better use it to meet your needs.

The first cascading aspect we should discuss is the inclusion of the files on a given page. There are three different ways in which someone can include styles into their website, and a very clear hierarchy in which those styles are applied. By including our styles in the appropriate way, we are able to share like styles across multiple pages while still allowing for specific customization when needed.

External CSS inclusion is the least intrusive and most broadly scoped implementation and should be used whenever possible. To include an external style sheet, one uses the LINK tag within the head tags of the HTML document. By linking to an external style sheet, we can improve our page's performance while completely separating the style code from the markup (a maintenance dream).

<link type=”text/css” rel=”stylesheet” href=”/path/to/styles.css” media=”screen” />

By using these link tags, you can include multiple individual style sheets within one web page, taking advantage of browser caching to only have to download the file one time and enhancing page load performance when used properly. Keep in mind that, when including multiple style sheets in this manner, the styles are applied in the order in which the pages are included.

Secondarily, CSS can be included directly into the header of a page, through use of the STYLE tag, and will be applied to all content within the current page. This method should be used sparingly and really is only appropriate for specific local overrides that are needed. If there is ever a chance the style declaration will be shared across multiple pages, the declaration should be included in a global (or external) CSS file.

<style type=”text/css” media=”screen”>/* Style Declarations go here */</style>

While this is a step above the third method of inclusion we will discuss in a moment, there are limitations to using this method.

The third and final way in which styles may be included should really be avoided at all costs, since it defeats the purpose of implementing style sheets in the first place. This method is inline style declarations and is tied to individual elements as an attribute.

<p style=”padding: 10px;”>

While the CSS declarations here give more flexible and readable code than font tags or other deprecated styling mechanisms within the markup, declaring specific styles for individual elements is still quite erroneous when following best practices in web development. The intent of implemeting CSS is to be able to separate the structure from the style and maintain them both independently.

So, where does the cascading come in, you might ask? Well, while there are three methods of including CSS in web development, you can use them independently or in combination. The thing to remember is that, while you are including multiple style declarations, they will cascade through until all styles have been applied to those elements. For instance, if you declare that paragraphs should be bolded in your first included style sheet and then duplicate that same paragraph selector in a subsequent style declaration, attaching italic text to the same paragraphs, the latter will not nullify the bold, but rather will add to it, cascading as it goes. Once both style sheet declarations have been loaded, all matching paragraphs will have bold and italicized text.

Additionally, you may wish to have a global style sheet for your entire site that will cascade down through all your pages. By including this site wide, you can then create smaller, more specific style declarations that may be included only on specific sections (or even pages) of your website. Once those styles are in place, you can continue to add more specific selectors and styles knowing that your previous declarations will continue to cascade and not break the overall feel of your site (even across different browsers).

By considering the behavior of CSS and defining additional style declarations, it is very easy to create some intricate cascades that give you precise control over your webpage and can be shared across your entire website. Understanding the cascading principle of CSS and applying it to your own style definitions is key to having a robust, maintainable website.

This article was written from the 12 years of professional web development experience the author can claim.

Additionally, there are some online resources that can serve as references for further learning:

Standards and Guidelines: W3C

CSS Community: CSS Creator

Tutorials and Training: W3 Schools