CSS Cascade Rules

The cascade is a set of rules that determines which CSS rules and which CSS property values within those rules will be applied to an HTML element.

For example, if we have two identical CSS rules with the same selector name, as in the following snippet:

p {
    color: green;
}

/* This rule will be applied to all paragraphs */
p {
    color: blue;
}

The last-mentioned p rule in the cascade is the one applied to all paragraph (p) elements:

<p>This paragraph has blue text.</p>
<p>This paragraph also has blue text.</p>

In this case, the last mention (declaration) of the p selector overrides the previous p selector rule, and styles all paragraphs on the page with blue text.

Specificity

The specificity is the rule that specifies which particular selector has greater importance among other selectors. It says which CSS selector has higher weight (higher importance) among a group of other selectors, and is the one that will be used to select an element.

For example, if we have element, class and ID selectors, all representing different CSS rules, which one of those is the one that will be applied to our element? The answer is the selector with the highest specificity, the highest weight. The following is a list of selectors with weights in an ascending order:

• Element selectors have lowest weight.
• Class selectors have intermediate weight that is higher than the element selector's weight.
• ID selectors have the highest weight/importance when compared to element and class selectors.

For example,let us take a look at the following CSS snippet:

p {
    color: red;
}

.my-class {
    color: green;
}

#my-id {
    color: blue;
}

This snippet defines three different CSS rules using three different selectors: element selector, class selector and an ID selector. All rules declare the same CSS color property, but give them different values.

If we apply all three selectors to a single paragraph, as in the following HTML snippet:

<p class="my-class" id="my-id">This paragraph will have a blue color.</p>

Here, we defined a paragraph with class and id attributes, and all three previous CSS rules from our stylesheet are applicable to our paragraph. Now, the question is which CSS selector will actually be used?

The answer is: the #my-id selector is the one that will be used as that kind of selector (the ID selector) has the highest specificity, the highest importance, and will be used to style our paragraph with blue text. It will override the color property value previously set by other selectors.

Inheritance

If we have a parent HTML element with several child elements:

<div class="wrapper">
    <p>This paragraph is a child element.</p>
    <p>This paragraph is also a child element.</p>
</div>

And we style our wrapper class as in the following CSS snippet:

.wrapper {
    color: blue;
}

Then all our descendant paragraph elements will also inherit the blue text color from their parent <div> element. Some CSS properties such as font, color and visibility are automatically inherited (from the parent element's styling), while other CSS properties such as height, width, margin and padding are not inherited.

We can use a special inherit keyword to force a property to explicitly inherit the given CSS property value from a parent. Example:

.parent-element {
    color: blue;
    padding: 10px;
}

/* Force the inheritance of the padding property: */
.child-element {
    padding: inherit;
}

Summary

The cascading rules including the order of declaration, the specificity and the inheritance, determine which CSS rules and properties are applied to our HTML elements. While there are other rules as well, these three will provide a solid knowledge base for understanding which CSS rules will be applied to our HTML elements.