HOW CSS WORKS - USE OF THE DOM 

HOW CSS WORKS - USE OF THE DOM 

We have learned the basics of CSS, we know what it is used for and how to write simple stylesheets for html documents. In this article we will take a look at how a browser takes CSS and HTML and turns that into a webpage. This is very important as it gives you a deeper understanding of what actually happens with website and web page elements.

HOW DOES CSS ACTUALLY WORK

When a browser displays an html document, it must combine the document's content with its style information from the css file. It processes the web page or document in a number of stages, which we have listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways. Let us summarize exactly what happens in a few simple steps.

1. The browser loads the HTML.
2. It converts the HTML into a DOM (Document Object Model). The DOM represents the document in the computer's memory.
3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images, videos, and CSS JavaScript is handled a bit later on in the process.
4. The browser parses the fetched CSS, and sorts the different rules by their selector types e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required. This last step is usually called rendering.
5. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
6. The visual display of the page is shown on the screen (this stage is called painting).

ABOUT THE DOM

A DOM has a tree-like structure. Each element, attribute, and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up. When you start working with browser DevTools you will be navigating the DOM as you select items in order to see which rules apply.

DOM REPRESENTATION

Rather than a long, boring explanation, let's look at an example to see how a real HTML snippet is converted into a DOM.

Take the following HTML code:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

In the DOM, the node corresponding to our <p> element is a parent. Its children are a text node and the three nodes corresponding to our <span> elements. The SPAN nodes are also parents, with text nodes as their children.

This is how a browser interprets the previous HTML snippet — it renders the above DOM tree and then outputs it in the browser like so:

Let's use: Cascading Style Sheets

APPLYING CSS TO THE DOM

Let's say we add some CSS to our document, to style it. Let us assume the html to be the following below:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Let's suppose we apply the following CSS to it:

span {
  border: 1px solid black;
  background-color: lime;
}

The browser parses the HTML and creates a DOM from it. Next, it parses the CSS. Since the only rule available in the CSS has a span selector, the browser sorts the CSS very quickly! It applies that rule to each one of the three <span>s, then paints the final visual representation to the screen.

The updated output is as follows:

WHAT HAPPENS IF THE BROWSER ENCOUNTERS CSS IT DOES NOT UNDERSTAND

In earlier articles we mentioned that browsers do not necessarily implement new CSS features at the same time. In addition, many people are not using the latest version of a browser. Given that CSS is being developed all the time, and is therefore ahead of what browsers can recognize, you might wonder what happens if a browser encounters a CSS selector or declaration it doesn't recognize.

The answer is that it does nothing, and just moves on to the next bit of CSS!

Similarly, if a browser encounters a selector that it doesn't understand, it will just ignore the whole rule and move on to the next one.

While this could be seen as a problem there are so many common css elements which are compatible with all browsers.

SUMMARY

We are finally done with understanding how css works, the next thing to learn and understand is inheritance, selectors and more.