The Cascade in Cascading Style Sheets can determine how a web page displays. The purpose of the Cascade is to resolve conflicts when more than one rule applies to an element on an HTML page. Factors such as specificity, inheritance, and the order of the rules within a style sheet can all affect the way rules Cascade.
Most web sites use external stylesheets exclusively. There may be more than one external stylesheet attached. Some of the external stylesheets may address specific aspects of the site’s design. For example, there may be stylesheets containing only workarounds for Internet Explorer, or stylesheets that only serve to reset the browser default styles.
Another common reason for multiple linked external stylesheets is the number of possible media types that can be applied to styles. The possible media styles are:
- all
- aural
- braille
- embossed
- handheld
- projection
- screen
- tty
- tv
Links to external stylesheets are listed in the document <head>. The order in which these external stylesheets are listed affects the Cascade. In The Cascade by Example, I mentioned that “the closest style rules.”
Here’s an example:
<link href="CSS/2col.css" rel="stylesheet" type="text/css" media="all">
<link href="CSS/mobile.css" rel="stylesheet" type="text/css" media="handheld">
<link href="CSS/print.css" rel="stylesheet" type="text/css" media="print">
Three sets of style rules. The first one listed has the media type “all.” That style sheet will apply to all media types. The second one listed uses the media type “handheld.” The third uses the media type “print.”
What does that mean in Cascade terms?
It means that for a user viewing a page in a handheld device that recognizes this media type (some handheld devices like iPhones are capable of rendering web pages using media types “all” or “screen”) will see the page displayed according to the rules in the handheld stylesheet. The Cascade is what makes it happen.
Here’s how it works. The handheld device may see the rules in the media type “all” stylesheet and attempt to apply them. If it sees the rules in the media type “handheld” stylesheet, these rules will take precedence over the rules in the “all” stylesheet. That’s because the “handheld” rules come after the “all” rules in the Cascade. Or to put it another way, the “handheld” rules are closer in Cascade terms than the “all” rules. And the closest rule wins.
The same principle applies to printers. A printer will format using rules from the “all” stylesheet, but any rules in the “print” stylesheet can overrule those in the “all” stylesheet in determining how the printer formats and displays the page.
Handheld devices vary so widely in capability that I don’t want to make generalizations about them. But it is safe to generalize about printers. Since the “print” rules come after the “all” rules in the Cascade, the “print” stylesheet only has to contain rules needed to override something in the “all” rules. For example, the “all” rule for color may be set to black. If you want the printer to print the text in black, there’s no need to add a new rule about color to the print stylesheet. However, if the “all” stylesheet uses percentages for font sizing, you might want to write some rules in the “print” styles that set the font sizing in points, which printers interpret more accurately. The rules using points will be the ones applied by the printer, because of the Cascade.
Related Posts:
One thought on “The Cascade and ordering external stylesheet links”