Do external stylesheets get loaded before the HTML?

html css rendering order-of-execution
Stephen Watkins picture Stephen Watkins · Jun 28, 2011 · Viewed 8.1k times · Source

If I have external stylesheets being included in the <head></head> section of my HTML page, will they be loaded before the HTML and immediately applied upon rendering? Let me present my specific use case.

External styles.css file:

form label {
    display: none;
}

Page containing form:

<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
</form>

Can I be confident that the labels will be invisible upon page load (no flickering due to CSS downloading)?

Otherwise, I can add the style attribute inline, but that can be a maintenance nightmare.

Answer

Emil picture Emil · Jun 28, 2011

If you include the CSS in the head section, you can be confident that the label will not show.

The HTML is downloaded first. The browser starts reading the html from the top, and starts fetching all CSS and JavaScript files referenced in the HEAD section. The page will not be painted (shown) until all the CSS and JavaScript files in the HEAD have been downloaded and evaluated.

Related questions

How to render thin fonts more smoothly in CSS 3 on Windows?

When I've designed my web site in Adobe Flash Pro CS6, the font looks like this: The font looks smooth and slightly thicker, and when I create HTML and CSS to render the font in a browser, it appears like …

Read More
Chrome rendering issue. Fixed position anchor with UL in body

There is a rendering issue with Google Chrome and Opera (why?=) with such code: <html> <style> #content { width: 150px; background: gray; } #sidebar { position: fixed; left: 200px; background: gray; } </style> <body> <div …

Read More
IE CSS display: inline-block Rendering issue

I'm having an annoying rendering issue with IE my code is CSS : div { display: inline-block; margin-right:40px; border: 1px solid; } HTML : <div>element</div> <div>element</div> <div>element</…

Read More