Share via:

External CSS

External CSS files can be used to easily share a set of styling rules across multiple pages.


Edited: 2016-10-04 13:27

External CSS makes it easier to maintain a website, and due to browser caching it will also speed up load times of individual pages.

After a browser have downloaded a StyleSheet once, it will not have to download it again, and it may be loaded entirely from the browser cache. This alone may significantly increase the speed of some websites.

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.

External CSS is the opposite to Internal CSS, and is kept separate from the HTML itself, effectively separating style from content.

Using the Link Element

This is likely the most commonly used way of linking External CSS. This should be placed in the head section of your pages.

<link rel="stylesheet" type="text/css" href="StyleSheet.css">

Using the CSS import declaration

The below makes use of the @import declaration of CSS, should be placed in the head section of your HTML source files. Can be useful if you are already using Embedded styles.

<style type="text/css">
  @import url("StyleSheet.css");