Newlogo.gif (8646 bytes)How Style Inheritance Works


Every web page has an object hierarchy, like this:

diag1.gif (16284 bytes)

The <BODY> tag is a container (or 'block level object') which holds everything that's visible on the web page. Within it can be other containers (DIVs, SPANs, H1s etc), and they can contain further, 'nested' containers.

When you apply a style rule to a container (including the <BODY> tag), the objects inside it (including nested containers) inherit some of its style properties (it depends on the property type - some, such as font-weight, are 'inheritable', while others aren't).

You can override an object's style inheritance by applying a CSS style rule to it (or giving it an inline style sheet). For example, a nested SPAN might potentially inherit a 'color:red;' (red text) property from its parent DIV, but by applying a rule which includes 'color:green;', the text it contains will be green instead.

The nested DIVs and SPANs below show the inheritance system in action:

I'm text in a DIV which is contained directly within the <BODY> section. Text in this DIV is bold red because this DIV's HTML tag has a CLASS="redbold" keyword, linking it to a CSS rule.
I'm text in a SPAN nested within the outer DIV. The SPAN has inherited the DIV's bold and red style properties.

I'm text in a DIV nested within the SPAN. By default this DIV would inherit bold and red style properties, which have 'cascaded' down from the outer DIV, through its nested SPAN. However I have my own style CLASS ("greenDiv") with its own color property, so I don't inherit my parent's red text. I do, however, inherit its bold font.

I'm text in a DIV nested within that DIV - and guess what, I've inherited my parent DIV's green text, plus the bold font that's cascaded all the way down from the outer DIV!

I'm  text inside an <h3> style container, nested within the SPAN like the DIV above. I'm in the H3 style's larger font size, but I've also inherited the red color property that's cascaded down from the outer DIV.  


I'm more text in the outer DIV

Back to Menu