How CSS Works Behind the Scenes: An Overview

Lecturer: Hello, and welcome back to a more conceptual lecture this time. This is probably one of the most important lectures of the entire course. I promise you that we are going to go back to some serious coding after this section, but since you signed up for an advanced CSS course, we need to get into some advanced stuff before moving on in the course and in our project. Now, I couldn't really call this course an advanced CSS course if I wouldn't show you some of the stuff that happens behinds the scenes of CSS as we load the webpage, right? Now most, if not all, of the the other courses out there, they just teach you the coding stuff itself, but in my courses, I like to teach you how stuff actually works, and important concepts that you need to understand in order to become a better web developer and, in this case, a better CSS developer. That's what I did in my Java script course, if you took that one. And that's what I do in this course as well. So, let's take a look now. And we start by asking what actually happens to our CSS code when we load up a certain web page in a browser. Now, a bunch of stuff happens behind the scenes of the internet, until the browser can start loading that website we requested. Things like http requests, figuring out the right domain name service, etc. We're not going to focus on all of that though. Instead, we're only interested in what happens in the browser on a computer where the user opens the page. So, our starting point is when the browser actually starts to load the initial html file. It then takes the loaded html code and parses it, which basically means that it decodes the code line by line. From this process, the browser builds the so-called Document Object Model, or DOM, which basically describes the entire web document, basically like a family tree, with parents, children, and sibling elements. So, this Document Object Model is where the entire decoded html code is stored. Now, as the browser parses the html, it also finds the style sheets included in the html head, and it starts loading them as well. And just like the html, CSS is also parsed, but the parsing of CSS is a bit more complex. And that's why we'll talk about that in great detail in the next lecture. For now, let me just tell you that during the CSS parsing phase, there are two main steps. First off, conflicting CSS declarations are resolved through a process known as the cascade. The second step in a CSS parsing is to process final CSS values. For instance, converting a margin defined in percentage units to pixels. Imagine that we define the left margin as 50%, but that 50% on a smartphone is completely different than a 50% on a large screen, right? And that's why these percentages, and other relative units, can only be calculated on the user's device in the parsing phase. But, again, we're going to talk more about that over the next lectures. And, of course, I'm going to show you all of this in code as well because that's obviously the whole point of learning all of this. Alright, now after all of this is done, the final CSS is also stored in a tree-like structure called the CSS Object Model, similar to the DOM. And now that we have the html, as well as the CSS parsed and stored, these together form the so-called Render Tree. And with that, we finally have everything we need to render the page. Now, in order to actually render the page, the browser using something called the Visual Formatting Model. The algorithm calculates and uses a bunch of stuff that you already know about, like the box model, floats, and positioning. We're going to talk a little bit about how this Visual Formatting Model works in one of the next lectures, because it actually has a lot to do about how we write our code. So, stay tuned for that lecture. Okay, and so finally, after the Visual Formatting Model has done it's work, the website it's finally rendered, or painted, to the screen and the process is finished. Great! So, now you understand what happens behind the scenes of a page load in a browser. And over the next couple of lectures, you're going to understand it even better and even deeper. So, I hope that you're curious now. So let's move on to the next lecture right now.