How CSS Works?

Here’ what happens from the moment a user enters a website URL to when the styled content appears on the screen:

User Enter the Website URL

The user types a URL (like www.learnwitharshyan.com) into the browser and presses enter.

The Brower Sends a Request

The browser sends an HTTP request to the web server where the website is hosted.

HTML is Retrieved

The server responds with the requested HTML file, which is sent back to the browser.

HTML is Parsed Into the DOM

The browser reads and converts the HTML into a DOM (Document Object Model) – a tree-like structure where each HTML tag becomes node.

For example:

				
					<body>
  <h1>Hello</h1>
  <p>Welcome to CSS</p>
</body>

This becomes a tree where <body> is the parent, and <h1> and <p> are child nodes.

CSS and Other Resources Are Fetched

Next, the browser identifies and fetches all linked resources like CSS files, fonts, images, and JavaScript files.

CSS is Parsed and Matched to the DOM

The browser reads the CSS and match selectors (like body, .class, #id) to the corresponding nodes in the DOM.

Render Tree is Created

From the styled DOM, the browser constructs a Render Tree, which combines content (HTML) with tyles (CSS). Only visible elements are included in this tree.

Layout

The browser calculates the exact position and size of each element on the page based on the render tree.

Painting

Finally, the browser paints the content – actually drawing the pixels on the screen – using the styles defined in the CSS.

What is the DOM?

DOM stands for Document Object Model.

It is:

A structured representation of the HTML document.
Tree-like in shape.
A way for browsers and JavaScript to interact with HTML elements.

Think of the DOM as a blueprint of your webpage. Each tag is converted into a node, and relationships like parent and child are defined.

Helpful References

To deepen your understanding, check these resources:

How HTML Works – Learn the basics of HTML structure.
MDN CSS Guide – A detailed, developer-friendly guide on CSS and how it’s parsed and rendered.