CSS - How it works

Question

i want to know how CSS works.. how browsers execute whatever is designed in CSS...

lets say

when a page is loaded and it has multiple CSS file attached to it, and mouse goes over some anchor and finds a class set for it it will go search all the CSS files for the relative class and read its hover state and then render it...

HOW HOW.. how this works... you might have guess what i want to ask...

Answer 1

That's an exceptionally broad and complicated question. It's essentially asking, "How do browsers render pages?" This video showcases how Gecko happens to do it for a sample page. Seeing the rendering process broken down like that may give some sense of just how complicated it is.

Ultimately, since the CSS specification gives no requirements or even guidance about implementation, every browser (or, we should say, "every rendering engine") will do things differently. If you were to write a new browser from scratch today, you'd be free to explore any algorithm you wanted.

The idea to read through every rule and see which ones match (for each element) is certainly a viable starting point, though almost certainly some optimizations and caching would need to get tacked on to make that perform acceptably for stylesheets with real-world complexity.

Fortunately for you, though, both the major rendering engines in use today (Webkit and Gecko) are open source, and you are free to download them, explore the code, and even make changes. And that's really the only way to learn how those engines work at that level of detail.

Answer 2

How the CSS works exactly depends on the browser (I suggest downloading the webkit source code and mucking around in there if you really want to know)

But what is usually uniform is the DOM structure which is used by browsers to turn markup into objects the browser can manipulate.

Webkit