The cascade of styles provides a clear process for determining which style declaration is used if more than one declaration matches against a particular element. Because CSS allows for multiple style sheets in numerous locations, the cascade guidelines use a priority system to determine which style rules apply. The cascade assigns a 'weight' to each style rule and, when more than one rule applies to an element, the one with the greatest weight wins!
To help understand the cascading system, we will start by clarifying some terms.
Definitions
- The "User Agent"
- The W3C does not use the term "Browser". Instead it uses the term agent or user agent or UA for short.
- In this class, web browsers are the agent(s) we are dealing with. But to the W3C, and in a larger context, agents can be wireless phones, PDA devices, tablet PCs, or refrigerators... the agent is the device that interprets and renders XHMTL and CSS on that device.
- Default Browser Style Sheet... the UA
- User agents (browsers) are required by the W3C to provide a default style sheet so as to provide guidelines for elements in the absences of any user/author style sheets. In other words, if there are no defined style sheets, then the browser itself must provide the defaults for what elements should look like when no other styles are defined. These default styles are what you see when you look at your 'unstyled' Lab_1 document in a browser.
- In the case of Firefox, the browser's default style sheet is located in the file html.css... edit this at your own risk!
- User Style Sheets
- Agents should provide the "end-user" the capability of defining their own styles. This can be accomplished via a browser's "preferences" function giving the end-user the ability to define their own complete external style sheet.
- In Firefox on a PC, users can choose the Tools|Options|Content menu to dictate which fonts, size, color, background-color, link colors, etc., should be displayed. The same options are found in the Firefox|Preferences command on a Mac.
- Firefox users may also create their own
userContent.css
style sheet which then plays a part in the "cascade."
- In IE7 users can choose the Tools|Internet Options menu command and then select the General tab to specify colors, languages, fonts and accessibility options. IE7 offers users the option to specify an external CSS file which defines how pages should be displayed based on the settings in that file. Within the Accessibility dialog box, there is a "Browse" button allowing you to locate the style sheet on your hard drive.
- Author Style Sheets
- Author style sheets include external style sheets which are used by markup files based on a LINK or an IMPORT directive.
- Some sources refer to author style sheets as "Designer style sheets", but this is not an official or recognized term.
- Author Embedded Styles
- Embedded Styles are those included in the HEAD of a markup document. The scope of these styles is limited to this ONE document where the styles are defined.
- Author Inline Styles
- These include styles which are attached as an attribute directly to an element within the markup document... 'in line' with the markup code. Inline styles are the closest style to the content so they typically have precedence over other styles.
- A "Rule"
- A rule typically comprises all of the properties and values for a tag or element.
p {
color: blue;
background-color: white;
}- This rule for the P element combines all of the individual "declarations" within the rule. This example contains two unique declarations.
- A "Declaration"
- A declaration is a single
property:value
set. You might assign multiple declarations to a specific selector: p {
color: blue;
background-color: white;
}- In this example there are two different declarations combined into one rule. The first declaration deals with the color property and the second declaration deals with the background-color property.
- Each declaration (
property:value;
) is considered to be on its own in terms of specificity within the cascade. Each of the two declarations in this element's rule will be considered separately. Color will compete with other color declarations applied to the P tag, and background-color will compete with other background-color declarations in other style sheets. When considering the cascade, the color property doesn't have anything to do with the background-color property.
Next we will examine how the order of style sheets, and rule declarations within those style sheets, behave within the cascade.