What Happens To CSS When A Webpage Is Loaded

Understanding how a browser loads up and renders a page is an important part of becoming a CSS ninja.  In this guide, you will learn how CSS works and how it is loaded

How Are CSS Style Defined?

A CSS rule consists of a selector and a declaration block. 

The selector might be a class name, an ID or an element type.  The selector, as the name suggests, is the thing that allows us to select one or more of what we want to style.

The declaration block is where we write the rule which will style the elements targeted by the selector.   Within a declaration block, we can write one or more declarations, which allows us to apply as many styles as we require to an element.  A declaration consists of a CSS property and its associated value, also known as the declared value.

How Is A Page Rendered?

First, when you type a URL into a browser, the browser makes an HTTP request to a server which then returns a page, made up of HTML.  The browser starts to parse this HTML, which will links and associations to additional resources like CSS, JS, Images etc..

As the browser parses the HTML it starts to build-up the document object model, based on the HTML structure and hierarchy.  The DOM is the thing Javascript uses to manipulate elements etc..

The browser will also read in and try to parse the CSS defined for the page.  Ths CSS can come from multiple sources, author-defined (inline or external CSS files), user-defined and browser-defined (user agent-styles, think default blue link on anchor tags). 

In this parsing phase is made up of two main steps.  In this phase, the browser will try to resolve any CSS declarations (known as cascade) and process any final CSS values. 

The cascade is the process of combing all the styles defined on a page for each element and then resolving any conflicts that occur.  If multiple rules are defined on the same element, the browser needs to figure out which rules it should apply.   For example, a font-size/style might be defined on the whole body, but an individual element like an H1 might have a specific style rule to make it look different than standard content text.

The cascade process uses various rules for determining what should be displayed.  Declarations like the important keyword will be rendered above normal declarations.  Next, the cascade will determine the importance of the selector to determine which declarations to render.  Inline styles will have a higher priority than referenced ID selectors.  ID's will have a higher priority over classes, pseudo-classes, and attributes.  Element selectors are at the lowest selector on the totem pole.

After the importance has been measured and if two elements have the same specificity value, then the last declaration will be used to style the element.

Tips... avoid important, as this is considered bad practice when styling elements and using good specificity is a better approach. The * selector has no specificity value.  Using a selector that uses an ID will be more specific than a rule with 5 classes.   Using a class selector is more specific than using multiple element selectors.

As the last declared selector will be rendered, always put your own custom stylesheets last, to ensure your styles get rendered.

Inheritance

The cascade is not the only thing that determines what styles get applied to elements.  After the cascade has been determined, inheritance also comes into play.  Inheritance is used to minimize the amount of CSS you have to write.  

Say you have an element with a width of 50%.  If you declare a child element within it, it will also have a width automagically set to it.  It is important to note that the value that gets inherited is the calculated value, so if the parent element has a width of 150%, the child element will automatically be applied with the computed value, e.g. an absolute pixel value.

It's also probably worth noting that inheritance is only applied to certain properties, like line-height, font-color, font family, however, not all values everything, like a margin.  To find out what elements do and what don't, you can head over to WCS.

What Next?

After this has occurred, and the browser has calculated the final CSS, it then stores this within the CSS object model.  You can think of the CSSOM in a similar way as the DOM, as in browser object that contains all the CSS the page needs.   Th CSSOM and the DOM together form the 'render tree'.  When the render tree has been generated, the browser has everything it needs to render the page.

To do this, the browser uses something called the visual formatting model to render the final page.   The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. 

It uses things like the box-model, floats, positions.  

After the algorithm has finished the page is finished and rendered.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top