Page is a not externally linkable
SuzyUK - 9:23 am on Sep 17, 2004 (gmt 0)
11. Inheritance We're back to the family tree again ;) a child element will inherit from it's nearest ancestor in the HTML flow (document tree), but only those particular properties that will inherit by default. Inheritance works with the document flow/tree and specificity. <div> Then the <p> rule tells the font-size of the paragraph to be 90% by way of it's specificity, i.e. the cascade order wouldn't matter here. So the <p> paragraph becomes 90% by way of specificity and blue by inheritance. The <span> would also be 90% and blue by way of inheritance too, in the absence of further rules, but we have specifically set it to be red so again it becomes red by way of specificity. ...and the font-size is being affected by both specificity and inheritance. Firstly the span is already 90% by way of inheriting the font-size from the paragraph, and then by explicitly setting the span to 90% we're telling it to be 90% of the paragraph's 90% not the div's 100%. Inheritance can be used to simplify lots of rules There should be no need to specify those same font-families on other elements within the document, but then should you want to change your e.g. <h1>, <h2>'s to a different family their inheritance of the body's font-family will be overridden by order of specificity. e.g. The "inherit" value The inherit value [w3.org] can be used on all elements either to strengthen inherited values, or it can also be used on properties that are not normally inherited. e.g. {height: inherit;} The W3C recs say: However IE doesn't seem to support this. .... more to follow...
Cribsheet - part 4 (following on from msg #31)
(related to: 7. Specificity)
e.g.
direction
color
font-family
font-size
etc... height is a an example of a non inherited property, and one which causes a bit of misunderstanding e.g. when trying to get 100% height across lots of columns.
Example:
div {
color: blue;
font-size: 100%;
border: 1px solid #000;
}
p {font-size: 90%;}
span {font-size: 90%; color: red;}
<p>paragraph text in here <span>span text</span> end.</p>
</div>
In the above example <div> sets the color, font-size and border. Border is not an inheritable property so the <p> and <span> will not have a border on them. Color and font-size are inheritable so the <p> and <span> being descendants of the <div> and in the absence of further rules, will both be 100% and colored blue.
Note: order in the cascade would not matter here..
For example setting the font-family on the <body> element avoids the need to respecify it on other elements.
(a exception may be the <table>, elements in IE/quirks?)
e.g.
body {font-family: arial, verdana, sans-serif;}
body {font-family: arial, verdana, sans-serif;}
h1, h2, h3 {font-family: georgia, serif;}
Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent.