CSS Cascade: Rules, Specificity, and Order!

Cascading Style Sheets (CSS) is a powerful language for controlling the presentation of web pages. One of the most important CSS concepts is probably the cascade: how conflicting rules are applied to an element. In this article, we will explain how CSS rules cascade: what it means in terms of specificity, inheritance, and rule order, as well as code exercises to help you practice and drill into your understanding.

Table of Contents

1. What is the CSS Cascade?

The cascade in CSS is a term that defines how several styles are combined, as well as conflicts in cases where more than one rule applies to the same element. The cascade determines which styles will actually be applied by considering three major factors:

• Specificity: The more specific a selector is.
• Inheritance: If a property is inherited from a parent element.
• Source Order: The order in which rules appear in the CSS file.

2. Factors Affecting the Cascade Specificity

Specificity:
Specificity is the weight given to a CSS rule that determines which rule applies when multiple rules target the same element. The more specific a selector, the higher its priority.

Inheritance:
Some CSS properties are inherited by child elements from their parent elements. For example, font-family and color are inherited by default.

Source Order:
When two rules have the same specificity, the one that appears later in the CSS file takes precedence.

3. Specificity in Detail

Specificity Hierarchy
Specificity is determined by the elements of a selector. Here is the hierarchy (highest to lowest priority):

Inline styles: Styles directly applied to an element using the style attribute.

ID selectors: Selectors targeting an element based on its id, such as #header.

Class, attribute, and pseudo-class selectors: Selectors such as.class, [type=”text”], and :hover.

Element and pseudo-element selectors: Selectors such as div and ::before.

Calculating Specificity
Specificity is often expressed as a quadruple: (a, b, c, d), where:

a: Inline styles (1 if any, 0 otherwise).

b: Number of ID selectors.

c: Number of class, attribute, and pseudo-class selectors.

d: Number of element and pseudo-element selectors.

Examples:

#header.nav a has specificity of (0, 1, 1, 1).
div p has specificity of (0, 0, 0, 2).

4. Inheritance in CSS

How Inheritance Works
Some properties, like color and font-family, inherit by default. This means that if you have set these properties on a parent element, they will apply to all child elements unless overridden.

Controlling Inheritance
You can control inheritance using the following CSS properties:

inherit: Forcing an element to inherit a property from its parent.

initial: Resets a property to its default value.

unset: It acts as inherit for inherited properties and initial for non-inherited properties.

5. Source Order

The Importance of Rule Order
When two rules are equal in specificity, the one that appears later in your CSS file is taken. This is why it matters which order your CSS rules are in.

6. Code Exercises

Exercise 1: Specificity Challenge

#html
<div id="container" class="main">
  <p class="text">Hello, World!</p>
</div>

#css
#container .text {
  color: blue;
}

.main p {
  color: red;
}

p {
  color: green;
}

Question: What color will the text “Hello, World!” be?
Answer: Blue, since #container.text has greater specificity than any of the other rules.

Exercise 2: Inheritance Practice

#hml
<div class="parent">
  <p class="child">This is a child element.</p>
</div>

#css
.parent {
  color: blue;
  font-size: 20px;
}

.child {
  color: red;
}

Question: What will be the color and the size of the child element?
Answer: Color: red-overriden. Font size: 20px-inherited

Exercise 3: Source Order Experiment

#html
<p class="text">This is a paragraph.</p>

#css
.text {
  color: green;
}

.text {
  color: orange;
}

Question: What color will the paragraph be?
Answer: Orange, because the second rule overrides the first due to source order.

7. Review

Understanding how CSS rules cascade is key to writing efficient and maintainable stylesheets. Mastering specificity, inheritance, and source order will guarantee that your styles apply how you would want them to. Try the exercises and then test different scenarios to deepen your understanding.