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.


  1. 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}
  2. Add the following code between the <head></head> tags of all HTML documents that you want to reference the external style sheet. This code uses the HTML <link> element to link to 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.