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