The CSS Cascade
Introduction
Overview
- L01a - (1:58)
- What happens when an element has two properties being applied to it, but each property has a different value?
- If two color properties are being applied to the same element, but one has the value of green and the other red, which color gets applied?
- Inevitably there will be some conflicts between rules with property values that compete for control of the formatting of some elements.
- There are many factors that determine what property value gets applied ultimately.
- This system of determining what wins out is called The Cascade.
- All browsers have their own style sheets, therefore there is always at least one style sheet being applied to any html file opened in a browser.
- But there can also be a user style sheet and, of course, embedded or linked-to rules in an external .css style sheet file.
- What happens when an element has two properties being applied to it, but each property has a different value?
The Cascade's Order of Precedence
- L01b - (5:44)
- The weight of a rule (and consequently its property values) is based on its context.
- Chart of the Cascade
Property Value Precedence In Detail
The following are listed in order from the least to the most control over determining what value gets applied.
User Agent (the browser's) default style sheet
- L01c
- (1:36)
- The user agent (browser's) internal style sheet has the least influence over what property values get applied.
- Examples of user agent style sheets:
- IE8's internal style sheet
- Comparison of different IE versions' internal style sheets:
- Table comparison of user agent style sheets used by different browsers:
- Firefox 3's style sheet:
- Style sheets used by numerous different browsers and versions:
User's style sheet
- L01d - (1:12)
- Many browsers allow users to use their own style sheet.
- Most people don't create their own style sheet but some do, for example visually impaired to get larger text.
- Theoretically the user style sheet should take precedence, but in reality it does not.
- Here's more info about user style sheets:
Inherited from parent element
- L01e - (4:56)
- Inheritance is one of the mechanisms that determine what property values get applied.
- Certain types of formatting get applied to not only the element specified by the rule's selector, but also to the contents of its nested elements.
- The HTML Document Tree
- Important points regarding inheritance:
- The rules of inheritance determine when a property gets applied to an element.
- Inheritable property values will be applied unless overridden by a different property value in a rule that is explicitly applied to the element.
- Non-inheritable properties will not be applied unless the inherit value is given to a property.
- Example: width: inherit;
- Some non-inheritable properties, such as background-color, will appear to be inherited because the default background color of all elements (which includes nested elements), is transparent. Because of this, the background color of the parent will show through.
- The properties that do or do not get inherited are common sense:
- Inherited:
- Text and font properties
- Not inherited:
- Backgrounds, borders, padding, and other box properties.
- Inherited:
Inherited properties include:
- color
- font & related properties
- letter-spacing
- line-height
- list-style & related properties
- text- related properties
- visibility
- white-space
- word-spacing
Non-inherited properties include:
- background & related properties
- border & related properties
- clear
- display
- float
- height, min-height, max-height
- margin & related properties
- overflow
- padding & related properties
- position & related properties
- vertical-align
- width, min-width, max-width
- z-index
- For a comprehensive list:
- W3C's list of properties includes a column that indicates whether the property is inherited or not.
- There is also a property value: inherit
- The inherit keyword will force inheritance.
- For example, the following will cause the paragraph tag to inherit the border property of its parent element:
p { border: inherit; }
Specificity
- L01f - (2:10)
- If there remain two or more property values assigned to an element with the same precedence at this point in the cascade, then the specificity of the selectors is taken into consideration.
- This refers to the amount of context provided by each competing selector, how particularly each is associated with the element.
- The more specific and particular the rule's selector is about where it ought to be applied, the higher the precedence it has.
- What this means is that if a selector contains more than one selector within it, it will have higher precedence than a single selector.
- Analogy, identifying a person - from the least specific to the most specific:
- Earth
- Continent
- Country
- State or province
- Population of city
- City
- Neighborhood
- Street
- Between what streets
- Street address
- The floor that you are on.
- Your room location on the floor
- The color of your room
- The color of your eyes
- Your mood
- Your first name
- Your last name
- Your middle name
- Height
- Weight
- Analogy, identifying a person - from the least specific to the most specific:
- L01g - (1:35)
- CSS has a method for evaluating specificity that uses a quasi-numbering system.
- The different types of selectors have these values:
- id = 100
- Because all id values are unique on a page, they are more specific than class or element selectors.
- class = 10
- A class can be applied to multiple elements on a page. But it must be manually applied whereas an element does not require an id or class attribute to be used as a selector. The class is then between an id and an element in terms of its specificity.
- tag = 1
- If a tag is used as the selector it is very simple to identify where it gets applied.
- No attributes are needed.
- Because of the ease with which it can be applied this has the least specificity.
- inheritance = 0
- Inherited properties are overridden by any style explicitly applied to the element that would otherwise inherit the property.
- Not all properties are inherited.
- But the inherit value will provide inheritance from the parent.
- The inherit value is applicable to all properties.
- id = 100
- L01h - (3:53)
- The values need to be added to determine precedence, the higher the value, the greater the precedence.
- So, for example, the following three rules are vying to specify the color value of the same em element. The text will be red because its selector is more specific:
- #container .sidebar p strong em { color: red; }
- Specificity = 100 + 10 + 3 = 113
- .sidebar p.tasks strong em { color: blue; }
- Specificity = 20 + 3 = 23
- strong em { color: green; }
- Specificity = 0 + 0 + 2 = 2
- #container .sidebar p strong em { color: red; }
- Of course, this numbering is not a base 10 numbering system.
- Some examples of using this numbering system include four levels, the fourth being 1000 which represents inline styles. I am treating inline styles instead as a subsequent level of precedence, further below.
Proximity
- L01i - (3:34)
- If all things are still equal at this stage, then the rule that is written closest to the element will take precedence.
- This is regardless of whether the rule is embedded in the document head or there is a link to an external css file there.
- If there is a link to an external style sheet and there are also embedded rules, then consider the external rules as being embedded where the link is.
- Embedded rules preceding the link would be applied first followed by those in the external css file, in the order listed in that file, followed by any embedded rules following the link.
Inline
- L01j- (1:17)
- If a style is applied inline it has the highest priority other than !important property values.
- Inline styles use the html style attribute and look like this:
<p style="color:green; font-weight: bold;">
!important
- L01k - (3:18)
- !important placed after a property value in the author's css, either embedded in the web page or in an external .css file, is going to give the property very high precedence.
- Only !important in the user style sheet has higher precedence.
- If the user style sheet has a declaration that includes !important, it will take precedence over everything else.
- Using !important
- Add !important after a property's value, but before the declaration's closing semi-colon.
- Example:
p { color: #0F0 !important; } - Note that if you use !important with any of the shorthand properties such as border or background, all of the properties in the rule will be !important.
- !important placed after a property value in the author's css, either embedded in the web page or in an external .css file, is going to give the property very high precedence.
For more information
General references
- Additional information
- http://reference.sitepoint.com/css/cascade
- http://reference.sitepoint.com/css/inheritancecascade
- http://webdesign.about.com/od/css/f/blcssfaqcascade.htm
- http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
- http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Introduction-to-Inheritance-Specificity-and-Cascade/
User style sheets
- Many browsers allow users to use their own style sheet.
- Most people don't create their own style sheet but some do, for example the visually impaired to get larger text.
- Theoretically the user style sheet should take precedence, but in reality it usually does not.
- Here's more info about user style sheets:
User Agent (browser default) style sheets
- The user agent (browser's) internal style sheet has the least influence over what properties get applied.
- Here is information about user agent style sheets including examples of them:
- IE8's internal style sheet
- Comparison of different Internet Explorer versions internal style sheets:
- This provides a table the compares user agent style sheets between browsers:
- Firefox 3's style sheet
- Firefox 3's Internal Rendering CSS
- Windows users might be able to find the Firefox style sheet here if you have Firefox installed:
C:\Program Files\Mozilla Firefox\res\html.css
- Be sure not to change it.
- This provides the style sheets for numerous different browser's and versions: