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 the 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. by 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 u see in the page write now, and images, CSS includes the 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[/caption]
what is parsing?:
parsing is nothing but processing of the code written by developer to visual format. parsing of the html and Css means that 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 parsing.
The DOM(document object model) will be created by browser. DOM means the reference of the all the elements in the in HTML file.
The parsing of the CSS will occur in two steps.
In This step the browser will will scan the css file from up to down and the here the Resolving the conflicts came from the Css Cascading rules.here the browser will make the virtual list of the final properties that should apply for the html elements.
In this step the browser will just assign the final computed values for the properties that should apply for 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 all the relative values will be converted to the absolute values.
Those two steps are:
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, 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.
Website is rendered. We will see the final rendered website visuals of our code we write on the code editor.
- How to create fade-in effect on page load using CSS ?
- JQuery | Set focus on a form input text field on page load
- How to execute AngularJS controller function on page load ?
- How to load jQuery code after loading the page?
- How to get focused a button automatically when the page load using HTML ?
- How to display search result of another page on same page using ajax in JSP?
- How to show Page Loading div until the page has finished loading?
- How to redirect a page to another page in HTML ?
- How to pass form variables from one page to other page in PHP ?
- How to hide an element when printing a web page using CSS?
- HTML | Responsive full page image using CSS
- CSS page-break-before Property
- CSS | page-break-after Property
- CSS | page-break-inside Property
- How to disable zoom on a mobile web page using CSS?
- CSS | @page rule
- How to design Meet the Team Page using HTML and CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.