CSSmarkup~8 mins

Inline vs external precedence in CSS - Browser Rendering Compared

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Inline vs external precedence

Load HTML document

↓

Parse <link> to external CSS

↓

Download external CSS

↓

Parse external CSS rules

↓

Parse inline style attribute

↓

Calculate specificity and precedence

↓

Apply styles to elements

↓

Layout and paint

The browser loads the HTML, fetches external CSS, then parses inline styles. It compares specificity and precedence, applying inline styles last to override external CSS.

Render Steps - 2 Steps

Code Added:External CSS: p { color: blue; font-size: 1.5rem; }

Before

[ ]
  |
  p (default black text)

[ ]
  |
  p (black text, normal size)

→

After

[ ]
  |
  p (blue text, larger size)

[ ]
  |
  p (blue text, 1.5rem font size)

External CSS sets paragraph text color to blue and increases font size.

🔧 Browser Action:Parse external CSS, apply styles, trigger reflow and repaint

Code Sample

A paragraph styled blue by external CSS but overridden to red by inline style.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p style="color: red;">Hello World</p>
</body>
</html>

CSS

p {
  color: blue;
  font-size: 1.5rem;
}

Render Quiz - 3 Questions

Test your understanding

After applying step 1, what color and size does the paragraph text have?

ARed color, 1.5rem font size

BBlack color, default font size

CBlue color, 1.5rem font size

DRed color, default font size

Common Confusions - 2 Topics

Why does my external CSS color not apply when I add an inline style?

Inline styles have higher precedence than external CSS, so they override external color settings as shown in render_steps 2.

💡 Inline styles always win over external CSS for the same property.

If I want to change font size, can inline style override external CSS?

Yes, inline styles override external CSS for any property they specify, but if font size is not set inline, external CSS applies.

💡 Inline styles override only the properties they set.

Property Reference

Style Source	Specificity Level	Precedence	Visual Effect	Common Use
External CSS file	Low (depends on selector)	Lower than inline	Applies styles globally or by selectors	Reusable styles across pages
Inline style attribute	Highest (inline styles)	Overrides external and internal CSS	Overrides specific element styles	Quick, element-specific overrides

Concept Snapshot

Inline styles have the highest precedence and override external CSS. External CSS applies styles globally or by selectors with lower precedence. Inline styles affect only the element they are on. Use inline styles for quick overrides, external CSS for reusable styles. Browser applies external CSS first, then inline styles last.