DEV Community

Seonyoung Chloe (she/they)
Seonyoung Chloe (she/they)

Posted on

4 1

34: How does CSS actually work?

When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below.

Bear in mind that this is a very simplified version of what happens when a browser loads a webpage and that different browsers will handle the process in different ways. But this is roughly what happens.


  1. The browser loads the HTML (e.g. receives it from the network).
  2. It converts the HTML into a DOM (Document Object Model).
  3. The DOM represents the document in the computer's memory.
  4. The DOM is explained in a bit more detail in the next section.
  5. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images and videos ... and linked CSS! 6. JavaScript is handled a bit later on in the process, and we won't talk about it here to keep things simpler.
  6. The browser parses the fetched CSS, and sorts the different rules by their selector types into different "buckets", e.g. element, class, ID, and so on.
  7. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).
  8. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
  9. The visual display of the page is shown on the screen (this stage is called painting).

MDN : HOW_CSS_WORKS

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →