Search code examples
htmlcssrenderingorder-of-execution

Do external stylesheets get loaded before the HTML?

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.

Solution

  • 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.