How the Browser Applies CSS

CSS stands for Cascading Style Sheets. The cascade is the algorithm the browser uses to decide which CSS rule wins when multiple rules target the same element and property. Understanding it is the difference between debugging CSS confidently and guessing at random.

The cascade: three factors

When the browser decides which rule to apply, it considers three things in order:

1. Origin — where the rule comes from (your stylesheet, an inline style, the browser’s defaults)
2. Specificity — how precisely the selector targets the element
3. Order of appearance — when origin and specificity are equal, the rule that appears later wins

In this lesson, you will focus on origin and order. Specificity gets its own module (Module 02) because it is complex enough to deserve it.

Browser default styles

Before you write a single line of CSS, the browser applies its own default stylesheet — called the user agent stylesheet. These defaults exist so HTML is readable even without any CSS:

• Headings are bold and larger than body text
• Lists have bullet points and indentation
• Links are blue and underlined
• Paragraphs have top and bottom margin

When you write body { margin: 0; } in your stylesheet, you are overriding the browser’s default margin. When you write a { color: #2c4a1e; }, you are overriding the default blue link color.

Your stylesheet wins over browser defaults. That is the first cascade rule.

Order of appearance

When two rules from the same origin target the same element with the same property, the later rule wins.

h1 {
  color: red;
}

h1 {
  color: green;
}

The <h1> will be green. The second rule appears later and overrides the first.

This applies within a single file and across linked stylesheets. If you link two external stylesheets, rules from the second file override rules from the first for any property where they conflict.

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">  <!-- theme.css wins conflicts -->

Inheritance

Some CSS properties automatically pass their values down from a parent element to its children. This is called inheritance.

body {
  font-family: Georgia, serif;
  color: #1a1a1a;
}

You do not need to set font-family and color on every element. <h1>, <p>, <nav>, <a> — they all inherit these values from body automatically.

Properties that inherit by default (partial list):

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

Properties that do not inherit by default:

• background-color (elements are transparent, not inheriting parent background)
• border
• margin, padding
• width, height
• display

You can force any property to inherit by using the value inherit:

a {
  color: inherit;  /* link uses the color of its parent instead of browser default blue */
}

Conflicting rules in practice

Here is what happens when you set color on both body and p:

body {
  color: #1a1a1a;   /* paragraphs would inherit this... */
}

p {
  color: #333333;   /* ...but this more specific rule wins */
}

The p rule wins because it targets <p> directly. A rule targeting the specific element beats an inherited value — even if the inherited value comes from a later rule. Direct targeting beats inheritance.

Seeing the cascade in DevTools

Open DevTools (F12) and click any element. In the Styles panel:

• Applied rules appear in order from most specific to least specific
• Overridden declarations appear with a strikethrough
• Browser defaults appear at the bottom under “user agent stylesheet”

This is the most important CSS debugging tool you have. When a style is not applying, look in DevTools for the strikethrough — something is overriding it.

Exercise

1. In your styles.css, write two conflicting rules for the same property:

p {
  color: blue;
}

p {
  color: #1a1a1a;
}

Open the browser. The paragraphs should be dark (#1a1a1a), not blue. Open DevTools and click a <p> element — you should see color: blue with a strikethrough, and color: #1a1a1a applied above it.

2. Remove the first rule and confirm the second one still works.

3. Now look at body in DevTools. Observe which font-family is shown — it should be your inherited Georgia, serif. Try removing the font-family from body in DevTools (uncheck the checkbox) and watch what the paragraph falls back to.

Module 01 Recap

• CSS is separate from HTML — it controls appearance, not structure. Link it with <link rel="stylesheet" href="styles.css">.
• External stylesheets are the professional standard — one file, applied to all pages.
• CSS rules are selectors followed by declaration blocks. Declarations are property-value pairs ending with semicolons.
• The cascade determines which rule wins when multiple rules conflict. Later rules override earlier ones when specificity is equal.
• Inheritance automatically passes values like font-family and color from parent to child elements.
• DevTools shows which rules are applied, which are overridden (strikethrough), and what the browser defaults are — your most important debugging companion.

Module 02 goes deeper into selectors — how to target elements precisely and how the browser resolves conflicts when different selector types compete for the same element.