About property inheritance

Content and tags contained within an item that hosts a style will automatically inherit the style properties. If you assign a style to an HTML tag or a selection in your document, any tags and content contained between the start and end tags or within the selection will inherit those style specifications. For example, consider an HTML element style named after the <h1> tag (Header 1 paragraph format) and given a blue color property. If the page has text that uses the Header 1 paragraph format, and some of that header text is also italicized with the <i> tag, the italicized text will inherit the blue properties of the <h1> start and end tags that contain it.

<h1>This is a heading of <i>size one<i>.</h1>

If we create an additional HTML element style named after the <i> tag and apply a pink color property to it, the <i> tag HTML element style will take precedence over the <h1> tag HTML element style because the <i> tags are nested within the <h1> tags. The italicized text would display in pink, and the rest of the heading would display in blue.

Inheritance can also impact the value of a style. The value of a style property can be given as a percentage that refers to a property that precedes it. In the following example, the line-height value of 120% is determined by the font-size property that precedes it in the style sheet.

H1 { font-size: 24pt }

H1 { line-height: 120% }

Children of H1 will inherit the computed value of line-height and be set to 28.8 pt, but they will not inherit the percentage.

When applying a style property to your pages, make sure you test it in all major browsers that support CSS. For a listing of browser-safe features, visit Web Review's Cascading Style Sheets Guide at http://webreview.com/style/.