By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

External CSS

How to keep your CSS in external StyleSheets.

Edited: 2011-03-16 02:36

External CSS, is the opposite to Internal CSS, and is kept separate from the main source files.

External CSS is used to increase the page performance, by keeping the styles cached in the browser. After the Browser has downloaded the StyleSheet once, it will not have to download it again.

Web designers can also use External CSS to make things easier for them self, in that they only need to edit one file, rather then each and every source file, had they used Internal CSS.

Page performance

This will be negligible for most smaller sites, and some may even benefit from using Internal CSS, since it may lower their HTTP Requests.

Practical uses

For most web designers, it will be more important to keep things easier to maintain, and easier to read. Then it will be to gain smaller performance enhancements.

Using External CSS will help to do just that. When using External CSS, you often only have to edit one StyleSheet, which will make things easier in the long run.

Many web designers have recommended to always use External CSS, and pretty much frowned upon doing anything else. But despite this, there are actually practical uses of Internal CSS as well.

How to Link External CSS

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");