External CSS
Harbour Café's site now has a home page, a menu page, a contact page and the festival page, and the owner wants the same fonts and colours everywhere. The answer is one stylesheet file that every page links to.
The rule
One file, linked from every page, changed once.
An external stylesheet is a plain text file ending in .css that holds only CSS rules, with no <style> tags and no HTML:
/* styles.css */
body {
font-family: Georgia, serif;
}
.price {
color: green;
}Each page connects to it with a link element in its head:
<head>
<title>Harbour Café</title>
<link rel="stylesheet" href="styles.css">
</head>rel="stylesheet"tells the browser what the linked file is for.hrefis the file's address. A relative path such asstyles.cssis looked up relative to the page's own location.
Why this is the default choice:
- One edit restyles the whole site.
- Caching: the browser downloads
styles.cssonce and reuses it on every page, so later pages load faster. - Clean HTML: pages hold content and meaning; the look lives in its own file.
A page can link several stylesheets, for example a shared base.css and a page-specific festival.css. They are read in the order the link elements appear.
The shortcut
Treat external CSS as the default, then check the path from the page's point of view: start in the folder that contains the HTML file and follow the href from there.
Locate the page
The menu page lives at
menu/index.html. The stylesheet lives at the site root:styles.css.
The classic failure is not an error message at all: a page that suddenly looks like plain 1995 text almost always means the stylesheet link is broken.
Drills
Answer fast — trust the rule.
Which tag correctly links an external stylesheet?
What should a .css file contain?
The page menu/index.html links href="styles.css", but the file is at the site root. What happens?
Why do later pages on the site often load their styles faster?
Remember
- One
.cssfile, linked from every page with<link rel="stylesheet" href="...">. - Follow the
hreffrom the page's own folder. - An unstyled page usually means a broken link path.