External Style Sheets

An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.

Example

Type the following into a plain text file, and save with a .css extension (i.e. external_style_sheet.css).


p {font-family: georgia, serif; font-size: x-small;}
hr {color: #000000; height: 1px }
a:hover {color: #ff0000; text-decoration: none}

Add the following between the <head>...</head> tags of all HTML documents that you want to reference the external style sheet.
<link rel=StyleSheet href="external_style_sheet.css" type="text/css">

Now, all of your HTML documents will use the styles from your external style sheet resulting in a consistent look and feel. If you want to change anything, you only need to update the external style sheet.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/css/external_style_sheets.cfm">External Style Sheets</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites