Cascading, Inheritance, and Specificity

In this article, we will explore three fundamental concepts in CSS: cascading, inheritance, and specificity.

These concepts are essential for understanding how CSS rules are applied and how conflicts between different rules are resolved.

Cascading

The "C" in CSS stands for "Cascading," which refers to the logic your browser uses to determine which CSS rules are the most important, especially when they conflict.

One of the simplest ways your browser does this is by paying attention to the order in which your rules appear in the stylesheet.

The browser will apply the last rule it reads when rules have equal specificity.

Imagine your stylesheet contains the following rules:

h1 {
  color: red;
}

h1 {
  color: blue;
}

Both rules target all <h1> elements but specify different colors. Because the browser cannot apply both colors simultaneously, it follows the principle of cascading: the last rule in the stylesheet wins. Therefore, in this example, all <h1> elements will be blue.

Specificity

Here's something that beats cascading...

Specificity is a way of determining which CSS rule to apply by assigning a weight to different types of selectors.

When multiple rules apply to the same element, the rule with the highest specificity wins, regardless of the order in which they appear.

Here's a breakdown of the specificity hierarchy:

1. IDs:
   • Styles applied using an ID selector have high specificity. IDs are unique within a page, making them powerful selectors.

#example {
  color: blue;
}

2. Classes: These selectors have moderate specificity. This group includes class selectors (.class), attribute selectors ([attribute=value]), and pseudo-classes (:hover, :focus).

   .example {
       color: green;
   }
   

3. Elements: Element selectors (e.g., p, h1) have the lowest specificity.

p {
  color: black;
}

There is also Inline Styles: Inline styles, applied directly within an element's style attribute, have the highest specificity. They will override any other styles defined in <style> tags or external CSS files.

<p style="color: red;">This text is red.</p>

You can use multiple selectors to gain more specificity:

/* Specificity: (2 class selectors) */
.example1.example2 {
    color: yellow;
}

/* Specificity: (1 ID, 1 element selector) */
#example p {
    color: orange;
}

/* Specificity: (3 element selectors) */
div p span {
    color: pink;
}

Important Rules

Using !important can override any other style rule, regardless of specificity. However, it should be avoided as much as possible because it makes the CSS harder to maintain.

p {
  color: blue !important;
}

Inheritance

Inheritance allows CSS properties to be passed down from parent to child elements. This helps keep your CSS code DRY (Don't Repeat Yourself) and makes it easier to manage styles.

Consider the following HTML and CSS:

<section>
    <p>This is a paragraph inside a section.</p>
</section>

section {
    font-family: 'Verdana';
}

The <p> element inside the <section> will inherit the font-family from its parent, making the paragraph text appear in the 'Verdana' font.

Non-Inherited Properties

Not all CSS properties are inherited. Properties like height, width, margin, and padding are not inherited by default. For example:

p {
    background-color: lightgrey;
}

section {
    background-color: lightyellow;
    height: 250px;
}

In this case, the <p> element will not inherit the height of the <section>, demonstrating that some properties need to be explicitly defined for each element.

Save this article for reference, but I promise, with time and practice, it will become intuitive.