Overview of how does CSS works behind the scenes?

Let’s start by understanding what actually happens to our CSS code when we load up a web page in a browser.

When a browser starts to load the initial HTML file, it takes the loaded HTML code and parses it, which means that it will decode the code line by line.By this process, the browser builds the so-called DOM (Document Object Modal) which describes the entire web document in a tree with parent, children and sibling elements.

HTML Parsing

As the browser parses the HTML, it also finds the stylesheets included in the HTML head and just like HTML, CSS is also parsed.But the parsing of CSS bit more complex.

There are two main steps that are performed during the CSS parsing phase :

1. Conflicting CSS declarations are resolved (also known a cascading)

2. Process final CSS values (for eg- converting a margin defined in percentage units to pixels)

Parsed CSS is also stored in a tree-like structure called CSS Object Modal, similar to DOM.

CSS Parsing

Both parsed HTML and CSS together form the so-called Render Tree.With this, we finally have everything we need to render the page.

Visual Formatting Model is something that is used by the browser to actually render the page. It is the algorithm that calculates the boxes(box-model) and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page.

So finally, after the visual formatting model, the website is finally rendered or painted, to the screen.

This is the brief picture of the process that happens behind the scene.In the next article, we will dive deep into the topic(CSS parsing, visual formatting modal) to know what exactly happens behind the scene.

Follow me on Twitter, LinkedIn or GitHub.

I hope this article is useful to you. Thanks for reading & Keep Learning !!