How cascading and inheritance work

Cascading establishes the order in which multiple style assignments are evaluated for a given tag and inheritance specifies which style properties are passed on (and which are not) from one tag to another in that order.

Cascade

Cascading in a style sheet specifies how styles of different types (inline style, embedded style, linked style sheet, imported style sheet) affect a tag; the cascade order is from general to specific.

For example, you create a linked style sheet for your whole site, but include an embedded style on a single page to make that page look different. The embedded style overrides the linked style sheet. You might also have a section on that page that you want to standout so you add an in-line style, which overrides the setting for the embedded style.

For example, in a linked style sheet, we set the <h1> tag style as:

h1 {font-face:"arial"; font-size:14pt; text-align:left;}

On the same page we have an embedded style sheet:

<style>
h1 {font-color: blue;}>
</style>

The <h1> tag on your page is affected by the style in both the linked and the embedded style. The browser applies the <h1> style from the linked style first, followed by the embedded style. So the <h1> on the page would be 14pt Arial, left-aligned and in blue. The font face and alignment are inherited from the linked style sheet and the colour taken from the embedded style. If we had an inline style as well, it would have been applied last, overriding all others.

In this example, there no conflicting style assignments — the font face and text alignment were only set in the linked style sheet and the font colour was set only in the embedded styles — so the styles trickled down unaltered.

When two properties in separate styles which both apply to a tag contradict one another, they can't both apply. The text of a tag can't be both red and blue, for example. In our example, if the linked style sheet set the colour of the <h1> tag to purple, this conflicts with blue colour specified in the embedded style. As the embedded style is more specific, its colour (blue) wins out over the previously set colour (purple).

If the cascade order doesn’t resolve the conflict, CSS provides an additional mechanism for resolving these conflicts called specificity. Some selectors are more specific than others. For example, the class and ID selectors are more specific than simple tag selectors. When two styles apply to the same tag and the properties contradict one another, the style with the more specific selector takes precedence.

Specificity can be resolved with the following rules:

ID selectors are more specific than other selectors
Class selectors are more specific than tag selectors and other selectors such as contextual, pseudo class and pseudo element selectors
Contextual selectors, and other selectors involving more than one tag selector are more specific than a single tag selector (and for two multiple tag selectors, the one with more elements is more specific than the one with fewer)

There are times though when the two styles will have the same specificity. In this case, the order of the styles is taken into account. The style that comes later in the cascade prevails.

For example, where one style is in an imported style sheet, and the other in the style sheet itself, the imported style sheet takes precedence. When the two rules are in the same style sheet, it is the one furthest from the top of the style sheet that takes precedence.

Inheritance

Inheritance works hand-in-hand with cascading. The HTML tags on your page follow a chain of inheritance. The top-level (parent) tag is <html> followed by <body>. If you assign styles to the <body> tag, your tables, lists, paragraphs, and all other lower-level HTML tags inherit from it. The rules of inheritance specify which style properties trickle down in the cascade and which don't. For example, the font-family value trickles down because it is an inherited property.

To set the global layout and formatting for your entire page, simply assign the appropriate properties to the <body> tag. For example:

body {font: 10pt/11pt Arial, Helvetica, sans-serif;
      background: url(clouds.gif);
      margin-left: 0.5in;
      margin-right: 0.5in;}

This sets the default font, leading, background image, and margins for the whole page. If you need to override the default for specific tags within your page, you can add style specifications for those tags in your style sheet. The tags you haven't set in your style sheet will inherit from their parent tags or from <body>.

You do need to be careful if you set style properties for the <body> tag. For example, if you set the colour for the body text, the colour applies to everything on the page, including lines. If you set the font size, some browsers apply this size to all text including headings and pre-formatted text because all text in the body section inherits the font size from the body tag.