– so I assume the CSS must be applied last before the page is actually
displayed to the user. Am I correct? If not, when is the CSS
actually applied? And is there any tools that are used to debug CSS?
CSS is typically applied at the time of page rendering, which (in modern
browsers), starts as the page is downloaded.
Steps to display a web page:
1. Fetch the page and start downloading.
2. Hit the body and actual content. Start downloading external pages
(from style and script tags) as soon as you see those tags.
3. Start rendering the content currently downloaded as the page is
4. If an external style page is loaded, reflow the current page to apply
5. If a script tag without defer is hit, execute the script inside.
6. As more content is downloaded, reflow the page with the additional
7. Once page is finished loading, fire the onload tags of the body and
execute the deferred scripts. Any dynamic modifications to the DOM or to
the styles cause a reflow.
You should be able to see this effect if you load a moderate-sized
complex page and throttle your connection down to a few Kb/s.
As for tools to debug CSS, Firebug in Firefox and Dragonfly in Opera
should both be adequate.