Ophy Boamah
Ophy Boamah's Blog

Ophy Boamah's Blog

How CSS Works In Browsers

How CSS Works In Browsers

Understand how CSS styles are parsed and rendered on the Web

Ophy Boamah's photo
Ophy Boamah
·Aug 8, 2022·

4 min read

Play this article

Table of contents

  • How It Actually Works
  • The DOM
  • The CSS Object Model
  • Rendering CSS
  • Layout first, paint next
  • Conclusion
  • References

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

CSSParser.png

When a project built with HTML and CSS is run on a browser, this is the process the code goes through:

  1. The HTML gets loaded first by the browser.
  2. Once loaded, it is converted into a DOM (Document Object Model), which represents the document in the computer's memory.
  3. Resources such as videos, images, CSS files etc that are linked by the HTML document are fetched by the browser.
  4. 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.
  5. The render tree simply shows the structure the document should appear in after the rules have been applied to it.
  6. 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>

DOM.png

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.

CSSOM.png

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;
}

RenderTree.png

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.


References

  1. Modern CSS: Master Key Concepts of CSS for Web Development
  2. MDN Web Docs
 
Share this