What Happens To CSS When We Load a Page?

Although we know how to write the code of the HTML and CSS many developers don't know how the HTML and CSS will be processed by the browser. If you don't know how the HTML and CSS will be processed then don't worry I am here to help you. This article will help aspiring developers and developers working with web basics to solidify the concepts that they have the information in their minds. Read the full article to grab the knowledge.

what is HTML and CSS?

HTML means hypertext markup language and CSS means Cascading style sheets. In simple words, HTML is used for giving the structure for the whole web page, by the way, the structure of the web page means the text you see on the page written now, and images, CSS includes styling means how the HTML element should look on the page.

What Happens To The Css(cascading style sheet) when It Loads In The Browser

What is parsing?:

parsing is nothing but processing of the code written by developer to visual format. parsing of the html and Css means how the browser will process them and how it will arrange our code in the visual format on the browser screen.

Now we will learn the processing and parsing phase of the html and css by the browser.

when the user requested the website then the browser will request the HTML document from the server and the browser will load up the code in the HTML document.

In the second step the browser will process the code while processing the code it will just download the images and the other CSS files for the styling of the web page, and the CSS code will also load up in the browser. The CSS file will be downloaded when the HTML file is parsed.

The DOM(document object model) will be created by the browser. DOM means the reference of all the elements in the HTML file.

The parsing of the CSS will occur in two steps.

In This step, the browser will scan the css file from up to down, and here the Resolving the conflicts that came from the Css Cascading rules. Here the browser will make the virtual list of the final properties that should apply to the html elements.

In this step, the browser will just assign the final computed values for the properties that should apply to the HTML elements. here the final computed values will be calculated based on the viewport(means the size of the browser on the screen). here the final values of all the relative values will be converted to the absolute values.

After Solving The two major works in the parsing phase of the CSS. After that browser will create the CSSOM. CSSOM means the cascading style sheet, or object model. In simple words, CSSOM means the styles that should be applied for the HTML elements finally in the browser in front of the user.

In this step, the browser will take both DOM and CSSOM and creates the final rendering tree. rendering tree will have all HTML elements and styles for them. The browser will take that rendering tree and give it to the Visual Formatting Tool.

The visual formatting tool will create the final layout of the page that will create the final visual version of our HTML and CSS code.

The website is rendered. We will see the final rendered website visuals of the code we write on the code editor.