print
KILL IE605 Inheritance
Cascade
The C in CSS stands for another feature of stylesheets: They are cascading. CSS has sophisticated rules for inheritance of rules.
These rules are applied in the following order:
1. Rules marked with !important take precedence
2. More specific selectors take precedence over broader ones.
3. User-defined roles take precedence over document rules, and document rules take precedence over browser rules.
4. Later rules for the same selector in a CSS take precedence over earlier rules.
CSS rules are inherited inside the document structure. Children of HTML elements inherit most of their formatting. CSS2 allows to specify this inheritance explicitly with the "inherit" value. inherit specifies that a property should inherit the value of the parent element for that property.
Example
Font type and font size are defined in the <body> element. Because the <p> <h1> elements inherit this value, you get a common font for the whole document.
body {
font-family: Verdana, SunSans-Regular, Sans-Serif;
font-size: 11px;
color: #000;
background-color: #fff;
}
Font family, size and color were defined in the body element. <h1>overwrites the text color with red, and the background color with transparent.
h1 {
color: #f00;
background-color: transparent;
}
If the <h1> contains a <em>element, and <em> has no color assigned, it inherits red from it's parent element.
<h1>This word is red, <em>italic </em>and beautiful.</h1>
Some values are not inherited, such as background-color. CSS2 allows to specify transparent as the backround color. Valid CSS always requires a background-color, by the way.
!! PROBLEMS WITH IE !!
!! Internet Explorer does not inherit font-size from <body> to <td>. This means you have to specify font-size for <td> again.
!important Rule
Rules with the !important qualifier overwrite normal rules. Both author and user stylesheets may contain !important rules. In that case, the user rules take precedence.
This is a new behaviour in CSS2, it was the other way around in CSS1. Older browsers that only support CSS1 therefore misinterpret the !important qualifier. CSS2 makes major strides for accessibility. Persons with poor vision, for instance, benefit from the definition of minimum font sizes.
p { font-size: 20px !important; }
