Newbie - when is the CSS applied?

[GiJeet]

Hello, I'm new to CSS and I see lots of examples where Javascript is
used to apply styles to elements on page load - unobtrusive javascript
- 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?

TIA
G

[Joshua Cranmer]

Re: Newbie - when is the CSS applied?

GiJeet wrote:

Hello, I'm new to CSS and I see lots of examples where Javascript is
used to apply styles to elements on page load - unobtrusive javascript
- 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.

<technical>
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
downloading.
4. If an external style page is loaded, reflow the current page to apply
those styles.
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
content.
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.
</technical>

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.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

[GiJeet]

Re: Newbie - when is the CSS applied?

On Jun 1, 9:36 am, Joshua Cranmer <Pidgeo...@veri zon.invalidwrot e:

<technical>
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
downloading.
4. If an external style page is loaded, reflow the current page to apply
those styles.
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
content.
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.
</technical>
>
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.
>
--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

Thanks!