We all have used CSS to build beautiful and responsive webpages. But do you know:
How browser parses the CSS?
How CSS renders the style?
How layout of the page is decided?
In this post I will try to answer the above questions in a simple manner.
- Resolve conflicting CSS declarations.
- Process final computed CSS values.
- Visual Formatting Model.
Let's understand each step.
- Different stylesheets are combined together.
- Resolving conflicts when more than one rule is applied to a certain element.
For ex: Which color to apply when defined twice for the same element.
All relative units (%, em, rem, vh, vw) are finally converted to absolute unit, pixels (px).
So, that's how CSS is parsed on the browser.
If you enjoyed this post you will surely love the My weekly NewsLetter
Thanks a lot for reading.