How CSS Works In Browsers
Understand how CSS styles are parsed and rendered on the Web
Cascading Style Sheet is also known as the HTML beautifier. It is used to style elements, create animations and define layouts. Styling in CSS generally starts from more specific to less specific rules. CSS was first proposed at a conference in Chicago in 1994.
Before that, the process of styling web pages was rather difficult and less efficient. Imagine using the centre tag to align elements to the centre of a page. Or having to declare colour and size in a font tag.
In this article, we’ll learn how CSS works in browsers using a step-by-step breakdown of the process.
How It Actually Works
When a project built with HTML and CSS is run on a browser, this is the process the code goes through:
- The HTML gets loaded first by the browser.
- Once loaded, it is converted into a DOM (Document Object Model), which represents the document in the computer's memory.
- Resources such as videos, images, CSS files etc that are linked by the HTML document are fetched by the browser.
- Once fetched, the browser parses the CSS and sorts the rules by their respective selectors. With any given selector, the rules are applied in order of specificity leading to what is called a render tree.
- The render tree simply shows the structure the document should appear in after the rules have been applied to it.
- Finally, the painting stage, where visuals of the page are displayed on the screen.
The DOM
The image of the DOM below demonstrates the steps by which code is rendered by a browser. It's literally in the order in which it is declared in an HTML document. From the boilerplate, through to the body and then the various semantic elements that have been used. These are all done before checking out any linked resources or files CSS, JavaScript etc. It is a tree of objects that represent the elements in the document and their structure and hierarchy. This tree is composed of DOM nodes.
<!DOCTYPE html>
<head><head>
<body>
<h1>Hello World</h1>
<div>
<h2>Subtitle</h2>
<p>Hello World!</p>
<body>
</html>
The CSS Object Model
After the DOM has done its own rendering, the CSS Object Model (CSSOM) follows in a similar manner. This is another tree structure that represents the hierarchy of styles in the document. While they are both tree structures, the CSSOM is a separate structure from the DOM. The image below shows the styled applied to the body, h1, div, h2 and p elements declared in the image above. The styles of the body are parsed and rendered first and it follows the hierarchy till it gets to the p element.
Rendering CSS
After both the DOM and CSSOM have finished their processes, their outputs are combined to form the render tree. The render tree now has all the information the browser needs to render the page.
body {
font-size: 16px;
}
h1 {
font-size: 1.5rem;
color: orangered;
}
div {
padding: 1rem;
}
div h2 {
font-size: 1.2rem;
color: blue;
}
div p {
font-size: 0.9rem;
color: gray;
}
Layout first, paint next
After creating the render tree, the browser can begin laying out the elements on the page. The aim of this is to properly arrange the styles in order of importance. Or how specific the CSS rule for that element is. Therefore styles such as position, spacing, width, height etc are used to determine each element's size and location on the page. It's important to note though that, at the layout stage, no styles are visible on the screen for users to see. However, upon completion of the layout, the browser now begins painting and users can now see and appreciate the styles.
Conclusion
CSS, though most will argue isn't a programming language, is very essential for web developers and enthusiasts to know. Learning the syntax isn't enough but understanding how it works behind the scenes, is necessary. This is a largely simplified version of what happens when a browser loads a webpage containing some CSS styles. Though different browsers will handle the process in different ways, this is the general overview.