Inheritance of Styles
When a style is defined for a tag, the specified properties override the existing
properties for that tag. The properties that the original tag had that were
not overridden, are inherited into the new style. The following example applies
a style to the <h1> tag so that the text is right aligned. If no other
style has been specified for the <h1> tag then the browser's default
font size, font face, colour, etc is used with the style.
<h1 style="text-align:right">Right-Aligned Text</h1>
Order
of Inheritance
The order of inheritance is the same as that of priority. Inheritance within
style sheets can be thought of as an inheritance tree consisting of the inline
styles, the style sheet in the <head> of the HTML document, and the external
style sheet. Any of the styles may be missing, in which case the style above
is inherited.
- An inline style is inherited from the style defined in the <head> of
the document if one exists.
- Styles defined in the
<head> of the document
are inherited from the external style sheet if one exists.
- Styles defined
in the style sheet are inherited from the browser.
If a style is missing within the inhertance tree, the style is inherited from
the style above. For example, If there is no style specified in the <head> of
the document or an external style sheet, the style for the <h1> tag defined
above would inherit the other properties for <h1> from the browser. If
all properties for the tag are overridden, then no inheritance will take place.