CSSmarkup~10 mins

Inline, internal, and external CSS - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Inline, internal, and external CSS

Load HTML file

↓

Parse HTML

↓

Find <style> block (internal CSS)

↓

Parse internal CSS rules

↓

Find elements with style="..."

↓

Apply inline styles

↓

Find <link rel="stylesheet"> (external CSS)

↓

Fetch external CSS file

↓

Parse external CSS rules

↓

Combine all CSS rules

↓

Calculate specificity and cascade

↓

Apply final styles to elements

↓

Layout and paint

The browser reads the HTML, then finds and parses internal CSS inside <style> tags, inline CSS inside style attributes, and external CSS linked via <link>. It combines all styles, resolves conflicts by specificity and order, then applies the final styles to elements before showing the page.

Render Steps - 5 Steps

Code Added:<p>Hello World!</p> inside <body>

Before

[Empty page]

→

After

[Hello World!]

Adding a paragraph element shows the text 'Hello World!' in default black color and normal weight.

🔧 Browser Action:Creates DOM node for <p> and renders default styles

Code Sample

This code shows a paragraph styled by three CSS types: external CSS sets font size and color red, internal CSS sets color blue, and inline CSS makes text bold. The final text is bold, red, and 1.5rem size.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Types</title>
  <style>
    p { color: blue; }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p style="font-weight: bold;">Hello World!</p>
</body>
</html>

CSS

/* styles.css (external) */
p {
  font-size: 1.5rem;
  color: red;
}

Render Quiz - 3 Questions

Test your understanding

After applying step 3 (external CSS), what color and font size does the paragraph have?

ABlack color and 1rem font size

BRed color and 1.5rem font size

CBlue color and 1rem font size

DBlue color and 1.5rem font size

Common Confusions - 3 Topics

Why does inline CSS override both internal and external CSS?

Inline CSS has the highest specificity because it is applied directly on the element, so it wins over internal and external styles even if they set the same property.

💡 Inline styles trump all others because they live right on the element.

Why does internal CSS sometimes override external CSS even if external is loaded later?

If internal CSS selectors have higher specificity or use !important, they can override external CSS. Also, order matters only when specificity is equal.

💡 More specific selectors beat later loaded styles.

Why does external CSS override internal CSS color in this example?

External CSS and internal CSS have equal specificity (type selector), but external is declared later (<link> after <style>), so it wins.

💡 Later CSS beats earlier CSS when specificity ties.

Property Reference

CSS Type	Where Defined	Specificity Level	How Applied	Common Use
Inline CSS	style attribute on element	Highest	Directly on element, overrides others	Quick one-off style changes
Internal CSS	<style> block inside HTML <head>	Medium	Applies to matching elements in the page	Page-specific styles without external files
External CSS	Separate .css file linked via <link>	Lowest	Applies to all pages linking the file	Reusable styles across multiple pages

Concept Snapshot

Inline CSS is written directly on elements and has highest priority. Internal CSS is inside <style> tags in HTML and applies to the page. External CSS is in separate files linked with <link> and applies site-wide. When styles conflict, inline overrides internal/external due to specificity. Internal vs external: later declaration wins if equal specificity.