28: Inheritance and Cascade

Inheritance and cascade are two of the most important concepts in CSS. The former relates to how child elements inherit styles form their parents, and the latter defines how CSS rules are applied to a document, and how conflicting rules do or don't overwrite one another. In this article, Tommy Olsson explores these concepts in detail.

( Read the article )

I very much like the explanation of the cascade.

You have successfully simplified the official explanation by omitting "1. Find all declarations" and reducing the cumbersome "2. Sort according to importance (normal or important) and origin (author, user, or user agent)" to the simple distinction between normal and important declarations.

However, after having read this article (and many others) I still have one question:

How exactly do inheritance and cascade work together?

My theory is as follows:

First of all the browser collects all relevant declarations "to the element and property in question". There are three possible outcomes to this:

1. No declaration
If no declaration is found, the browser checks for an inherited value. If no value is inherited he uses the "initial value" from "Full property table" in the CSS spec.

2. One declaration
If one declaration is found the value is simply being used.

3. Multiple declarations
If more than declaration has been found, they are sorted by Importance, Specificity and Source order until one value wins.

If a value is found, the browser then checks if the keyword "inherit" forces inheritance.

Does this assumed sequence of events make sense?

Thanx
Peter

Yes, your understanding is correct.

The specification can be found here: http://dev.w3.org/csswg/css3-cascade/