Using Cascading Style Sheets (CSS)

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.

You might also like...


About the author

Gez Lemon United Kingdom

I'm available for contract work. Please visit Juicify for details.

Interested in writing for us? Find out more.


Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.” - Brian Kernighan