External CSS: Linking a Stylesheet to Your Pages

An external stylesheet is a separate .css file that many pages can share. This is the normal way to style a real website.

Step 1: create the file

Save this as styles.css:

1
2
3
4
5
6

body {
  font-family: Georgia, serif;
  background: #fffbf9;
  color: #1c1b1f;
}
h1 { color: #b84624; }

Step 2: link it from each page

Use the link element inside <head>:

1
2
3
4
5

<head>
  <meta charset="UTF-8">
  <title>Juniper Books</title>
  <link rel="stylesheet" href="styles.css">
</head>

• rel="stylesheet" says what kind of file this is.
• href is the path to it, just like a link.

Why it is the best option

• Write the style once and use it on every page.
• Change the design in one place.
• Browsers can cache the file, so later pages load faster.

Using more than one stylesheet

You can link several. Later files override earlier ones when rules conflict.