External CSS
External CSS files can be used to easily share a set of styling rules across multiple pages.
By. Jacob
Edited: 2019-01-10 13:15
Using External CSS files makes it easier to maintain larger websites where CSS is shares across multiple pages.
If you only have a single page, then it makes perfect sense to have the CSS as style blocks either in the head or body, as this will be faster than having the CSS in an external file.
However, when multiple pages share the same CSS, keeping the CSS in external files is faster. This is because browsers cache the files, allowing them to load the CSS from a local cache rather than re-download the CSS on every request.
Another benefit from using external CSS, is that you will only have to edit the CSS in one place, which makes it much easier to maintain your website.
For very large stylesheets, you will want to split it up into multiple stylesheets, and then compile them into a single file using a CSS preprocessor such as sass, or you can load them only when needed in the <body> to speed up first-display times.
External CSS is the opposite to Internal CSS, and is kept separate from the HTML itself, effectively separating style from content.
Linking to StyleSheets in HTML
Normally, external CSS files should be loaded from the <head> part of the HTML, which can be done using the <link> element.
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
It can also be done using CSS @imports, but this is not recommended, as it might slow down a site significantly, and the files might not get properly cached.
Using the <link> element in the <body> part of your HTML is allowed in both WHATWG's Living Standard and HTML5. This allows for progressive rendering of pages, and can be useful if you have a large CSS file, which is not needed until later in the rendering process.
Progressive rendering
Progressive rendering techniques will delay loading and rendering of specific parts of a web page, often those below the fold (basically parts not visible, since they are outside of the screen area). One way to do this, is to split the CSS into multiple files, and then include them in the body instead of the head.
The actual rendering of your page is not going to be faster, it might actually be slower because of more HTTP requests. But, it will give the illusion that your page loads faster.
When a browser encounters CSS in the body, it will pause rendering until the CSS is loaded. The exact behavior depends on the browser, but it is generally reliable.
It used to be a bad practice to have CSS in the body, and in many cases it still is. After all, these StyleSheets still need to be loaded, and if the CSS is used often enough, you may as well just include them in your head, since the CSS is then loaded from cache on subsequent page-views. However, in HTML5 CSS in body is now valid.
In other words, use CSS in the body with caution, and remember to test if the result is actually worth any extra effort.
Links
- The future of loading CSS - jakearchibald.com
Tell us what you think: