Course Outline (Part 2)

Welcome to Part 2 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore the three core pillars that define the behavior of Cascading Style Sheets: The Cascade, Specificity, and Inheritance.

Many developers feel frustrated by CSS because styles seem to “break” or apply unexpectedly. This happens when the browser’s style resolution algorithm resolves conflicts behind the scenes. By mastering the mathematical and logical rules governing specificity, inheritance, and cascade hierarchy, you will understand exactly how the browser determines which styles win.

Chapter 11: The Cascade Algorithm

The word Cascading is the first word in CSS. It describes how browsers resolve conflicts when multiple styles target the same HTML element. The browser uses a strict hierarchical algorithm consisting of three main stages:

graph TD
    A[Multiple conflicting rules target an element] --> B[1. Check Importance & Origin]
    B --> C[2. Check Selector Specificity]
    C --> D[3. Check Source Order]
    D --> E[Final Winning Style Applied]

11.1 Importance & Origins

When conflict arises, the browser first evaluates where the style rule came from. There are three primary origins of stylesheets, each with normal and high importance states:

  1. User Agent Stylesheet: The browser’s default stylesheet (e.g., how a <button> looks on Chrome before you style it).
  2. User Stylesheet: Custom styles set by the browser user (e.g., accessibility overrides, dark mode extensions, customized font adjustments).
  3. Author Stylesheet: The stylesheet written by the web developer (you!).

11.2 Order of Precedence (Lowest to Highest)

If multiple styles exist, the browser sorts them by origin and importance:

  1. User Agent declarations (normal)
  2. User declarations (normal)
  3. Author declarations (normal)
  4. Active CSS Animations (@keyframes)
  5. Author declarations (important: !important)
  6. User declarations (important: !important)
  7. User Agent declarations (important: !important)
  8. Active CSS Transitions (which override even user agent !important to allow smooth animations)

Within your CSS file, the main battleground is between normal Author declarations, which are resolved using Specificity and Source Order.

Chapter 12: CSS Cascade Layers (@layer - Deep Dive)

Modern CSS introduced Cascade Layers (@layer) to solve the issue of specificity wars in large codebases. Layers allow you to group style sets and define their priority explicitly, regardless of the specificity of the selectors inside them.

12.1 Defining Layers

You declare cascade layers using the @layer rule:

/* 1. Declare layer order at the very top of your file (first has lowest priority) */
@layer reset, base, components, utilities;

/* 2. Write code inside layers */
@layer base {
  p {
    font-size: 1rem;
    color: #333; /* Normal text */
  }
}

@layer reset {
  /* This has lower priority than base, even if selectors are more specific */
  body p {
    color: red;
  }
}

@layer utilities {
  /* This utility layer will always override base layer declarations */
  .text-highlight {
    color: orange;
  }
}

12.2 Sub-Layers & Nesting

You can also nest layers or combine them using dot notation:

@layer components {
  @layer buttons {
    .btn { background: blue; }
  }
  @layer cards {
    .card { padding: 20px; }
  }
}

/* Equivalent shorthand */
@layer components.buttons {
  .btn-primary { background: darkblue; }
}

12.3 Layer Priority Rules & Quirks

  • Unlayered Styles Override Layered Styles: Unlayered styles have the highest priority of all normal declarations, overriding any layered styles regardless of their specificity.
  • !important Inversion: If you apply !important inside a layer, the priority is inverted. A layered !important rule will override an unlayered !important rule! This ensures reset layers can defend themselves against inline overrides if necessary.
  • Importing into Layers: You can link external stylesheets directly into layers: 
    @import url('bootstrap.css') layer(framework);
  • Media Queries & Layers: When layers are loaded inside breakpoints, their priority order remains consistent: 
    @layer theme, overrides;

@media (max-width: 600px) {
  @layer theme {
    body { background: white; }
  }
  @layer overrides {
    body { background: black; } /* Overrides wins */
  }
}

Chapter 13: Specificity Calculations

If two or more CSS rules target the same element, the browser evaluates their selectors. The selector with the highest Specificity Score wins.

13.1 The Specificity Formula

Specificity is represented as a four-part scoring system: (A, B, C, D).

  • A: Inline Style: Style attribute on element. Score: (1, 0, 0, 0)
  • B: ID Selector: #id query. Score: (0, 1, 0, 0)
  • C: Classes, Attributes, Pseudo-classes: .class, [attr], :hover query. Score: (0, 0, 1, 0)
  • D: Elements, Pseudo-elements: div, p, ::before query. Score: (0, 0, 0, 1)

Note: The Universal Selector (*) and combinators (+, >, ~, ) have zero specificity: (0, 0, 0, 0).

13.2 Specificity Calculation Matrix

Let’s see how selectors compile mathematically:

Selector                                        │  A  │  B  │  C  │  D  │ Total Score
────────────────────────────────────────────────┼─────┼─────┼─────┼─────┼────────────
h1                                              │  0  │  0  │  0  │  1  │ (0,0,0,1)
.nav-item a                                     │  0  │  0  │  1  │  1  │ (0,0,1,1)
#main-header .title span                        │  0  │  1  │  1  │  1  │ (0,1,1,1)
body #main-nav ul li.active a:hover             │  0  │  1  │  2  │  4  │ (0,1,2,4)
div[data-type="accent"]::before                 │  0  │  0  │  1  │  2  │ (0,0,1,2)
input[type="text"]:focus:disabled               │  0  │  0  │  3  │  1  │ (0,0,3,1)

13.3 Specificity Calculation Examples

  1. div.main-content article p

    • Elements: 3 (div, article, p)
    • Classes: 1 (.main-content)
    • Score: (0, 0, 1, 3)

  2. #nav-bar a.active[target="_blank"]

    • IDs: 1 (#nav-bar)
    • Classes: 1 (.active)
    • Attributes: 1 ([target="_blank"])
    • Elements: 1 (a)
    • Score: (0, 1, 2, 1)

Chapter 14: Specificity Challenges & Case Studies

Evaluate these selectors and determine which one overrides the others.

14.1 Challenge Scenario 1: Styling a Paragraph

Suppose you have the following HTML structure:

<div id="main-content">
  <p class="intro-text" id="lead-para">Welcome to CSS!</p>
</div>

Let’s calculate the specificity of different rules targeting this paragraph:

  • Rule A: 
    #lead-para { color: red; } /* (0, 1, 0, 0) */
  • Rule B: 
    #main-content p.intro-text { color: blue; } /* (0, 1, 1, 1) */
  • Rule C: 
    div p { color: green; } /* (0, 0, 0, 2) */

Question: Which color will the paragraph display?

  • Answer: Blue (Rule B wins). Rule B has a specificity score of (0, 1, 1, 1) because it has 1 ID (#main-content), 1 Class (.intro-text), and 1 Element (p). This beats Rule A (0, 1, 0, 0) because it has higher class/element counts, and beats Rule C (0, 0, 0, 2) because Rule C lacks an ID selector.

14.2 Challenge Scenario 2: Logical Pseudo-Classes

How do :is(), :not(), and :where() affect specificity calculations?

  • :is() and :not(): The specificity of the pseudo-class itself is zero, but the score of its most specific argument is added to the selector score. 
    /* Specificity of :is(.active, li) is (0, 0, 1, 0) - class is highest */
/* Total Score: (0, 0, 1, 1) */
ul :is(.active, li) { color: red; }
  • :where(): The specificity of :where() and all its arguments is always zero. 
    /* Total Score: (0, 0, 0, 1) because .active is ignored! */
ul :where(.active, li) { color: red; }
  • :has(): Like :is(), it takes on the specificity of the most specific selector inside its arguments. 
    /* Specificity of .card:has(#active-badge) is (0, 1, 1, 0) */
.card:has(#active-badge) { border-color: gold; }

Chapter 15: Best Practices for Managing Specificity

In large codebases, managing specificity is key to avoiding code bloat. Follow these guidelines:

  1. Keep selectors flat: Avoid deep nesting (e.g., body div.wrapper #content main article p span is too deep). Nest up to a maximum of 3 levels.
  2. Avoid using ID selectors for styling: IDs have a high specificity score (0, 1, 0, 0), making them hard to override later. Use classes instead.
  3. Do not use !important: It breaks the cascade. Use it only for utility classes like a .hide { display: none !important; } helper.
  4. Use CSS custom properties for overrides: Instead of writing complex selectors to change styles on hover, change the custom variable values: 
    .card {
  --bg: #eee;
  background: var(--bg);
}
.card:hover {
  --bg: #fff; /* Clean variable override, keeps specificity flat! */
}
  5. Declare @layer order: Use cascade layers to categorize your CSS (Reset, Base, Components, Utilities).

Chapter 16: Style Inheritance & Browser Resolution

Some CSS properties are passed down from parent elements to their child elements automatically. This is called Inheritance.

16.1 Inherited Properties

Most text and typography properties inherit from parent to child:

  • color
  • font-family, font-size, font-weight, line-height
  • text-align, letter-spacing, word-spacing
  • visibility

16.2 Non-Inherited Properties

Layout and box-related properties do not inherit, as this would break the layout of nested tags:

  • width and height
  • margin, padding, border
  • background-color (child tags are transparent by default, making the parent background visible through them, but they don’t inherit the background property itself)
  • position, display, z-index

Chapter 17: Controlling Inheritance (CSS Keywords)

CSS provides four special keywords to control inheritance on any property:

  • inherit: Forces a property to take the value of its parent element.
  • initial: Sets the property back to its default value specified by the official W3C specifications.
  • unset: Acts as inherit if the property inherits naturally, and initial if it does not.
  • revert: Reverts the property to the browser’s default user-agent stylesheet.

17.1 Practical Keyword Usage

Suppose you want custom anchor links inside your sidebar to ignore the default blue color and inherit the sidebar’s dark text color instead:

.sidebar a {
  color: inherit;
}

Using the inherit keyword ensures links match their parent text styling seamlessly.

To reset all properties of a component to their default state:

.widget-reset {
  all: unset; /* Resets all styling properties in one declaration block */
}

Chapter 18: How the Cascade Handles CSS Custom Properties (Variables)

CSS Custom Properties (Variables) are subject to the cascade and inheritance algorithms like any standard CSS property.

18.1 Scope Resolution

Custom properties are scoped to the selector they are declared in:

  • Global Scope: Declaring variables in the :root pseudo-class (which matches the <html> root element) makes them available everywhere.
  • Local Scope: Declaring variables inside a specific component selector limits their availability to that component and its children.
:root {
  --theme-color: #3b82f6; /* Global theme color variable */
}

.card {
  --theme-color: #ef4444; /* Local scope override for cards only */
}

.card button {
  background-color: var(--theme-color); /* Resolves to #ef4444 */
}

body button {
  background-color: var(--theme-color); /* Resolves to global #3b82f6 */
}
  • Cascade representation:
  :root (--theme-color: blue)
     │
     └─── body (inherits blue)
            │
            └─── .card (--theme-color: red)
                   │
                   └─── button (uses local red)

18.2 Variable Fallbacks

The var() function allows you to specify a fallback value that is applied if the variable is not defined:

.badge {
  /* Uses --badge-bg variable, falls back to #e2e8f0 if undefined */
  background-color: var(--badge-bg, #e2e8f0);
}

Chapter 19: The Lifecycle of a CSS Value (Browser Value Resolution)

Before a browser paints an element, a single CSS property undergoes a 4-step transformation lifecycle. This represents the inner layout engine styling resolution process:

  1. Specified Value: The value obtained from the stylesheet rules (or browser defaults if undeclared). E.g., width: 50% or font-size: 2rem.
  2. Computed Value: The browser resolves relative terms (like rem, em, keywords) to absolute values during layout tree generation.
    • Example: 2rem computes to 32px (assuming root is 16px).
    • Note: Percentage values (like width: 50%) do not compute to pixels yet, they remain as percentages because parent sizes aren’t calculated until the next step.
  3. Used Value: The browser calculates the remaining relative values into absolute coordinates by analyzing the viewport and layout constraints.
    • Example: width: 50% inside a 600px parent is calculated to a used value of 300px.
  4. Actual Value: The browser adjusts the used value to fit device pixel boundaries (handling decimal pixel rounding like rendering 299.8px as exactly 300px on a high-DPI display).

Chapter 20: Specificity Conflict Debugging (12 Exercises)

Let’s debug style conflicts by calculating specificity:

  1. Exercise 1: 
    div#menu ul li a { color: blue; }
#menu .item a { color: red; }
    Calculate: Selector 1 is (0, 1, 0, 4). Selector 2 is (0, 1, 1, 1). Selector 2 wins because of the class selector .item.
  2. Exercise 2: 
    .sidebar .profile img { border: 1px; }
.sidebar [data-user] img { border: 2px; }
    Calculate: Both are (0, 0, 2, 1). The latter wins if it appears lower in the stylesheet due to source order.
  3. Exercise 3: 
    #content .section p:first-of-type { font-size: 14px; }
#content div.section p { font-size: 16px; }
    Calculate: Selector 1 has 1 ID, 1 Class, 1 Pseudo-class, 1 Element = (0, 1, 2, 1). Selector 2 has 1 ID, 1 Class, 2 Elements = (0, 1, 1, 2). Selector 1 wins.
  4. Exercise 4: 
    :is(article, section) p { font-weight: normal; }
article p { font-weight: bold; }
    Calculate: Both are (0, 0, 0, 2). Equal specificity; resolved by Source Order.
  5. Exercise 5: 
    .card button:not([disabled]) { cursor: pointer; }
div.card button { cursor: default; }
    Calculate: Selector 1 has 1 Class, 1 Attribute inside :not() (counts for specificity), 1 Element = (0, 0, 2, 1). Selector 2 has 1 Class, 2 Elements = (0, 0, 1, 2). Selector 1 wins.
  6. Exercise 6: 
    body #main-content p.text-normal::first-line { color: green; }
#main-content p.text-normal { color: red; }
    Calculate: Selector 1 has 1 ID, 1 Class, 1 Element, 1 Pseudo-element = (0, 1, 1, 2). Selector 2 has 1 ID, 1 Class, 1 Element = (0, 1, 1, 1). Selector 1 wins.
  7. Exercise 7: 
    #header .nav-link:hover { text-decoration: underline; }
#header a.nav-link { text-decoration: none; }
    Calculate: Selector 1 has 1 ID, 1 Class, 1 Pseudo-class = (0, 1, 2, 0). Selector 2 has 1 ID, 1 Class, 1 Element = (0, 1, 1, 1). Selector 1 wins.
  8. Exercise 8: 
    :where(#main-header) .title { font-size: 24px; }
.title { font-size: 18px; }
    Calculate: Selector 1 has :where(), which nullifies the ID specificity, leaving only .title = (0, 0, 1, 0). Selector 2 also has .title = (0, 0, 1, 0). Resolved by Source Order (Selector 2 wins).
  9. Exercise 9: 
    main section:nth-of-type(2) p { color: gray; }
main section p { color: black; }
    Calculate: Selector 1 is (0, 0, 1, 2) (pseudo-class + elements). Selector 2 is (0, 0, 0, 3) (elements only). Selector 1 wins.
  10. Exercise 10: 
    .card[data-featured="true"] a { font-weight: bold; }
.card a { font-weight: normal; }
    Calculate: Selector 1 is (0, 0, 2, 1) (class + attribute + element). Selector 2 is (0, 0, 1, 1) (class + element). Selector 1 wins.
  11. Exercise 11: 
    [type="button"]:hover { border-color: red; }
button:hover { border-color: blue; }
    Calculate: Selector 1 is (0, 0, 2, 0) (attribute + pseudo-class). Selector 2 is (0, 0, 1, 1) (pseudo-class + element). Selector 1 wins.
  12. Exercise 12: 
    :has(a:hover) { background: #eee; }
div { background: #fff; }
    Calculate: Selector 1 is (0, 0, 1, 0) (derived from :has(a:hover) which evaluates to a pseudo-class specificity). Selector 2 is (0, 0, 0, 1). Selector 1 wins.

Chapter 21: Self-Check Quiz

  1. What is the cascade order for normal declarations vs !important declarations?
    • Answer: Normal: User Agent < User < Author. !important: Author < User < User Agent.
  2. How do Cascade Layers affect specificity calculations?
    • Answer: Styles inside layers have their priority resolved by the layer order. A style inside a higher layer (declared later) will override a style inside a lower layer, regardless of the selector specificity inside those layers.
  3. What is the specificity score of a universal selector *?
    • Answer: (0, 0, 0, 0).
  4. Does the :not() selector add to the specificity score of a rule?
    • Answer: The :not() pseudo-class itself adds nothing, but the specificity of the selector inside its parentheses is counted.
  5. Which keyword resets a property to its default stylesheet settings established by the browser user agent?
    • Answer: revert.
  6. Does padding inherit naturally from parents to children?
    • Answer: No. Box layout properties like margins, paddings, and borders do not inherit.
  7. In what phase of value resolution does width: 50% convert to absolute pixel values?
    • Answer: The Used Value phase, once parent container dimensions are calculated.
  8. What happens when a custom property is used but has not been defined?
    • Answer: The browser uses the fallback value if one is declared in the var() function, otherwise it falls back to unset (inherits from parent, or resets to initial).
  9. What happens if an unlayered style conflicts with a layered style?
    • Answer: The unlayered style will always win, as unlayered styles occupy a higher cascade tier than layered styles.
  10. Does the :where() selector influence the specificity score of selectors placed inside it?
    • Answer: No, :where() always returns a specificity score of zero for all nested arguments.
  11. What happens to layer ordering when layered styles are wrapped in a media query?
    • Answer: The media query does not alter the layer priority hierarchy; the order defined at the root is still strictly respected inside the media query block.
  12. How is the revert keyword different from initial?
    • Answer: revert returns the property value to the browser’s native default styles (User Agent), whereas initial resets the property to the absolute default specified in W3C specs (often causing layouts to look unstyled, e.g. displaying div elements as inline).
  13. What is the specificity of the relational selector :has(a, .class)?
    • Answer: It takes on the specificity of its highest parameter, which is (0, 0, 1, 0) due to .class.
  14. Why are inline styles assigned a specificity score of (1, 0, 0, 0)?
    • Answer: To ensure inline rules override any CSS styles declared inside external stylesheets or internal <style> tags.
  15. Can transitions override normal author styles?
    • Answer: Yes. Transitions run in a dedicated high-priority stage of the cascade resolution algorithm to allow styles to morph smoothly.

Discussion

Loading comments...