Webpage loads with no style, no stylesheet, flash of unstyled content (FOUC)

How to fix a flash of unstyled content ie. a page loads without style, without a style sheet.

Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content - however this has been experienced in versions of the Opera and Chrome browser.

The Problem
Browser will display a short burst of unstyled content, and then load up the stylesheet. This is normally down to using the @import rule for loading stylesheets

The Solution
It is rather crude but the way to eliminate the problem is to use one LINK element or SCRIPT element inside a document’s HEAD.

The Code to use

<head>

<title>My Page</title>

<script type="text/javascript"> </script>

<style type="text/css" media="screen">@import "style.css";</style>

</head>

*NOTE: MAKE SURE you layout the code in the example shown above; ie. the LINK or SCRIPT code before the STYLE link, otherwise it will not work.