Current time: 08:32:41

In this example the stylesheet's LINK tag is in the document's HEAD. In IE this makes the page render more quickly, specifically when:

• the page is opened in a new window
• the page is reloaded - Hit Reload and note that the time updates first and the images load after, showing that the page is rendering progressively.
• the page is your browser's home page - Set your homepage to https://stevesouders.com/examples/css-top.php and open a new window.

In these situations the page loads progressively. The text is displayed followed by the six images as they are downloaded. Making the page start rendering sooner results in a better user experience.

Try Example 1 - CSS at the Bottom to see how moving the stylesheet outside of the HEAD can cause the page to load more slowly.

Try Example 3 - CSS at the Top Using @import to see why using the LINK tag is better than using the @import rule.