Why you should read this blog?
For a web developer , CSS is one of the most important things to learn for building apps with good UI and UX . Learning to write CSS is not the only thing to learn as a web developers . A good web developer should know how the things are actually working behind the scene and how the CSS is applied to the HTML elements. Having this understanding is really good for you as it will change the way you write your CSS and enhance quality of your code.
What actually happens when you open a website in your browser?
When a browser starts to load an HTML file , it takes an loaded HTML code and parses it . Parsing is the process of taking the HTML code and extracting valuable information from it. For example ; title of the page , header links , body elements . In other words , it decodes the HTML line by line. By this process, the browser builds the DOM (Document Object Modal) which describes the entire web document in a tree like structure with parent, children and sibling elements. While parsing the HTML , the browser also finds the stylesheets included in the HTML head and the CSS is also parsed. But the parsing of CSS is a bit more complex. There are two main steps which are performed during the CSS parsing phase : ; 1) Cascading. 2) Processing the real values.
Step 1 : Cascading :
There are three ways of adding CSS to our web App :
- Author/Developer style sheets : These are the ones written by the developer.
- User style sheets : It includes styles like the font-size which users can change in the browser according to their preferences.
- Browser style sheets : These are the styles which are set by the browser by default.
Cascading is the process of combining different stylesheets and resolving conflicts between the CSS rules and declarations. When you write multiple selections for same tags, classes or id's in CSS, it is called a CSS Conflict. So , cascading uses a defined set of rules to tell the browser which particular style has to be added to the HTML element . Therefore , the point of cascade is to resolve all the conflicts between the declerations which are coming from different types of style sheets based on the following factors :
- Importance.
- Specificity.
- Source order.
Cascade marks the importance of CSS styles based on the source they are coming from in the following order :
- User declarations marked with !important keyword. // Most importance
- Author declarations marked with !important keyword.
- Author declarations.
- User declarations.
- Browser declarations. // Least importance
If the importance of two or more conflicting styles is same then , in that case we use the specificity of the selectors that we are being used to style the element and the selector specificity is given as :
- Inline styles. // Highest precedence
- Id’s.
- classes , Pseudo classes , attributes.
- Elements , Pseudo elements. // Lowest precedence
Inline style or Inline CSS has the highest precedence because they are written in the HTML documents and not in the separate CSS files.
We can find the specificity of the CSS applied to any element based on the selectors we are using with the help of this formula : (I, ID, C, E). where I stands for inline style , C stands for (class , Pseudo class , attribute) and E stands for (element , Pseudo element).
For Example :
#nav button .btn:hover {
background-color: red;
}
The Specificity of this declaration will be :
(I, ID, C, E) = (0,1,2,1)
Let's now understand how this formula is used to resolve conflicts :
.btn{
color : red;
}
nav button {
color : green;
}
#navigation button .btn{
color : blue;
}
Let us calculate the specificity of all these declarations by using the formula.
(0,0.1,0) => 0 inline styles , 0 id's , 1 classes , 0 elements.
(0,0,0,2) => 0 inline styles , 0 id's , 0 classes , 2 elements.
(0,1,1,1) => 0 inline styles , 1 id , 1 class , 1 elements.
Since , we can see that the inline is 0 for all the 3 declarations , so we will move to the next one. Now , both first and second have the value of id as 0 but in third one it is 1. Therefore we dont have to even look on the other preferences and the third declaration will be applied.
If we also had the same value for id’s as well , we will have jumped to the next one i.e classes and even if the value of classes is same , then we will have jumped to the last one i.e elements. If all the four values are same then the source order will be taken into account. This means if two blocks have the same importance and specificity , then the one that is written at the bottom will be applied.
Step 2 : Processing the real values :
This step includes giving the final processed values to all the styles or we can say it involves the conversions from relative values to absolute values.
Now that both our HTML and CSS have been parsed and stored into their object models, they both form the Render Tree. It’s formed with a combination of HTML, DOM, and CSS-OM. This render tree is now used to calculate the layout of each element on the page and helps render the page.
After the render tree has been formed, the website uses something known as the Visual Formatting model. A Visual Formatting model is an algorithm that calculates the boxes and the box sizes for each element on the webpage and helps lay those elements on the page to determine the final layout of the page.
Finally, we have our rendered website.