Spring into Summer Sale! Save 15%
on any Shared Hosting Plan & Location.
 Code: SUMMER15

Put CSS in the Document Head

How does putting the CSS in the Document Head works and what Advantages it brings

Method Type: User (.CSS)

(This means that the method is handled by the user)

 

Status: Must be applied by the user.

 

Introduction:

Cascading Style Sheet (CSS) is the element that is read first by the web browser when loading a page. The browser will not render the page until all stylesheets have been downloaded and parsed.

 

How Putting the CSS in the document head works:

It is important to put the inline style blocks and references to external stylesheets in the head of the page. If they are in the body of a page they can significantly reduce the loading speed and even cause reflows that will further hit the performance of your website. You can use the

<link>

tag in the head of a document to reference external stylesheets and the

<style>

tag for inline stylesheets.

 

Putting CSS in the document head provides the following Advantages:

No content shifting during page load
No reflow caused by the CSS being in the body of the page
Increased loading page speed