CSS Precedence and Inheritance

External, Internal and Inline Styles

Styling information for an element could be defined in multiple places - in an external file, internally within the HTML header, and inline using the style attribute within the element's opening tag. If this happens, the end result will be the sum of all of these rules. So, for example, if for paragraphs you specified the Verdana font in your external CSS file, a font size of 12 point internally within the HTML file's header, and bold text using the style attribute on the element itself, then that paragraph would use 12 point, bold Verdana text.

If styles in these three places conflict (for example, if they all specified different fonts), then inline styles take precedence over internal ones, which in turn take precedence over external ones.

Nested Elements

In HTML, elements can be nested within each other. As a simple example, the body element will contain paragraphs and other elements, although much more complex nesting is possible. Styles which are set on an element are inherited by other elements contained within it. So, for example, if we specified a font on the body element, that font would be used on other elements contained within the body.

If the same property (such as a font) is specified at multiple levels, then the value from the innermost element takes precedence. So, if we specified a font for the body element and a different font for a paragraph element contained within it, the value for the paragraph element would take precedence.

Element, Class and ID

You can specify styles for an entire element type, a particular class, or a specific instance. If this happens, the end result will be the sum of all of these rules. So, for example, if for paragraphs you specified the Verdana font, for a particular paragraph class you specified a font size of 12 point, and for a specific paragraph ID you specified bold text, then that particular paragraph would use 12 point, bold Verdana text.

If styles at these three levels conflict (for example, if they all specified different fonts), then the styles based on the ID take precedence over those for the class, which in turn take precedence over those for the entire element type.

<-- Previous Page

Ext, Int and Inline Styles

Next Page -->

Text