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.