Moving inline style blocks and elements from the document body to the document head improves rendering performance. When you add CSS to your Web Pages, following are the three options for adding the styles.

• inline in the HTML tags


• in the HEAD in a Style tag


• Externally with a Link Element or Import

Guidelines:

• Inline styles can cause pages to load more slowly because they add more characters to be downloaded with every page. Plus, you can’t set the style for every similar element, so if, for example, you want all your paragraphs to have red text, you have to add style="color:red;" to every paragraph.


• STYLE Tag lets you apply styles to multiple elements with just one style property


• External style sheets are advantages as stated below


• Styles can be applied to multiple elements with one style property


• Those styles can be applied globally to every document on the site


• External style sheets can be cached to speed web pages loading


• And external style sheets only add a short LINK element to every page, rather than a long style sheet or styles in every element


• Specifying external stylesheets and inline style blocks in the body of an HTML document can negatively affect the browser's rendering performance. Browsers block rendering a web page until all external stylesheets have been downloaded.


• Therefore, it's important to put references to external stylesheets, as well as inline style blocks, in the section using tag.


• By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page.