CMW: External Stylesheets

Creating and Maintaining a Website: CSS: Using Style Sheets

Creating an External Stylesheet

A linked, or external, stylesheet is often the first line of formatting in a CSS strategy.  Linked stylesheets permit you to define style rules for multiple pages in your website.  The result is a centralized location for style information that can easily be modified or even replaced. The file takes a .css extension, and links to each page in its scope using the following syntax:

<link rel=”stylesheet” type=”text/css” href=”path_to_file.css” />

Exercise 1: Create a Stylesheet

  • Open a new Notepad or Text Wrangler window
  • Create a style rule as follows:

p{
font-weight: bold;
color: blue;
}

  • Save the file in your site root as style1.css

Exercise 2: Add an External Stylesheet to a Series of Webpages

  • Open index.html.
  • Immediately before the closing </head> tag, add the following code:

<link rel=”stylesheet” type=”text/css” href=”style1.css” />

  • Save and refresh index.html.
  • Open about.html and contact.html.
  • Immediately before the closing head tag, add the following code:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

  • Save and view about.html and contact.html.