CSSmarkup~10 mins

First CSS stylesheet - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - First CSS stylesheet

Read HTML file

↓

Parse HTML elements

↓

Read linked CSS file

↓

Parse CSS rules

↓

Match CSS selectors to HTML elements

↓

Apply CSS properties to elements

↓

Calculate styles and layout

↓

Paint elements with styles

↓

Composite final page

The browser reads the HTML, then loads and parses the CSS stylesheet. It matches CSS rules to HTML elements, applies styles, calculates layout, and paints the styled page.

Render Steps - 4 Steps

Code Added:h1 { color: blue; }

Before

[ H1: black text ]
[ P: black text ]

→

After

[ H1: blue text ]
[ P: black text ]

The heading text color changes from default black to blue because the CSS rule targets the h1 element's color.

🔧 Browser Action:Parse CSS, match h1 selector, apply color property, repaint text

Code Sample

This code shows a simple webpage with a blue heading and a green italic paragraph styled by an external CSS file.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>My First CSS</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my first styled page.</p>
</body>
</html>

CSS

h1 {
  color: blue;
  font-size: 2rem;
}
p {
  color: green;
  font-style: italic;
}

Render Quiz - 3 Questions

Test your understanding

After applying step 2, how does the heading look?

ABlue and larger text

BBlack and normal size text

CGreen and italic text

DBlue and italic text

Common Confusions - 2 Topics

Why doesn't my CSS change show up in the browser?

Often because the CSS file is not linked correctly or the browser cached an old version. Check the link href and refresh with cache cleared.

💡 Always confirm the CSS file path and reload the page fully to see style changes.

Why is my paragraph still black even though I set color green?

Make sure the CSS selector matches the element exactly and there are no typos. Also check if another CSS rule overrides it.

💡 Use browser DevTools to inspect the element and see which styles apply.

Property Reference

Property	Value Applied	Visual Effect	Common Use
color	blue / green	Changes text color	Make text stand out or match design
font-size	2rem	Changes text size	Make headings larger or smaller
font-style	italic	Makes text italic	Emphasize text or quotes

Concept Snapshot

First CSS stylesheet basics: - Link CSS file in HTML head with <link> - Use selectors like h1, p to target elements - Common properties: color, font-size, font-style - Styles change text color, size, and style - Browser applies styles after parsing CSS and HTML