seo: why you should put the external style sheets (css) in the document head

Every webpage has a head tag at the top of the source, known as the document head. It is different from what is sometimes referred as a header. Header usually refers to the visual elements that constitute the top part of a web site. Usually the header has a constant look and feel across all the pages, often containing the site logo and navigation menus.

The document head element on the other hand does not have any (almost) visual elements, and has mostly webpage meta data. It is specified within the xml tag, named head before the body tag. This can also include links to external web resources such as style sheets and JavaScript files. Other information that is commonly found here includes the title, description, author, character set etc.

Technically, you can specify style rule (or CSS) anywhere in the HTML document. You can use style tags, the style attributes of HTML tags or an external style sheet to specify the style rules for the page. Each of these has its own advantages and disadvantages.

In the strictest sense, it does not “matter” in terms of correctness where you put the style. Almost all browsers will render the page correctly once all the resources are downloaded. The idea here is to optimize the process, so as to speed up the rendering process by providing the browser with enough data at the appropriate times.

Ideally, you should use an external style sheet and link it in inside your document head element. If you happen to have multiple external style sheets then they can all be linked one after an other.

<link rel="stylesheet" type="text/css" href="redstyle.css">
<link rel="stylesheet" type="text/css" href="customstyle.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">

In order for the browser to render the page with minimum fuss, it need access to the style rules early in the process and technically before it renders the particular element. Although, it is possible to specify the rules later, it is much more convenient to link them early in the parsing process. Otherwise, the browser will to block or need to redraw and re-render the elements when the rules become available later.

There are some advantages in terms of the SEO in doing this in the document head, mainly parallel downloads early in the rendering process:

Parallel Downloads: When multiple style sheets are involved, it allows for parallel downloads to happen much early in the process of parsing and rendering. When possible combine multiple style sheets into a single one.

Speeds Up Rendering: The browser might be able to start the rendering process early as the style sheets and rendering rules are available. There is no guarantee that the style rules will be available before or when the rendering starts (that depends on the network and download times), but it ensures that it the rendering process will have to wait the least amount of time for the CSS.

Taking into consideration the rendering process of the browser, it is advisable to use an external style sheet and to link it as one of the first web resource inside the document head.

Moreover, you should also minimize the number of external style sheets that are used, inline the CSS when appropriate and minify them which are some of the other techniques that can be used to improve the SEO of your page.