The "Cascade" of CSS
One of the most frequent questions from site administrators learning CSS is "what does 'cascading' mean?" Before we answer that, however, we must understand how style sheets are used by the browser software.
All modern browser software uses a style sheet. If you set your default browser font to Verdana, the browser (IE, Firefox, Safari, etc.) will mostly likely change it's style sheet file. In addition to the browser's style sheet, users may also define their own style sheet to use. The browser will then use both it's own style sheet and the user's style sheet. Finally, the web site author creates a set of styles defined on the pages and/or on the web site's style sheet.
So when you visit a page in a web browser, the browser uses it's own style sheet, the user's style sheet (if specified), and the author's (web site) style sheet. Then the cascade kicks in following several rules.
- The browser finds all declarations that apply to the element and property.
- The declarations are sorted by weight and origin.
- The declarations are sorted by specificity of selector.
- The declarations are sorted by order specified.
For normal declarations, author style sheets override user style sheets which override the default style sheet. For "!important" declarations, user style sheets override author style sheets which override the default style sheet. More specific selectors will override more general ones. And if two rules have the same weight, the latter specified wins.
What does this all mean? Let's try to simplify.
- The author's (web site) style sheet almost always overrides other style sheets.
- The user's style sheet only overrides the author's styles if a declaration is tagged as "!important."
- Specific styles override general styles
- When rules have equal weight, the rule specified closest to the element overrides all others.
Finally, here's an example to help sort this all out. For this example, let's assume our "stylesheet.css" declares <p> font-family as Times. Let's also assume the visitor to your site has a browser default font set as Times and is not using a user's style sheet (this example is the default for most users).
<head>
<title>Example of cascading style declarations</title>
A <link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
B p { font-family: verdana, sans-serif; }
C p.sidebar { font-family: arial, sans-serif; }
</style>
</head>
<body>
D <p>This is the first paragraph in the page content.</p>
<div class="sidebar> E <p>This is a paragraph of text in an element named sidebar.</p></div>
F <p>Page content continues here...</p>
How will our fonts show up on this page?
- Even though our main style sheet declares <p> as Times, none of our paragraphs will be Times. Why? The style sheet is linked
A but the same style is declared B again on the page after the link. When rules have equal weight, the rules specified closest to the content overrides the others. So paragraphs D and F will be Verdana, because rule B is specified after rule A .
- Even though the visitor's browser uses Times as the default font, none of our paragraphs will be in Times. Why? Because author style sheets override browser defaults.
- The paragraph inside the sidebar
E will display in Arial font, not Times and not Verdana. Why? Because a more specific rule C overrides a more general rule B .
|
