Module 9: A Touch of CSS · Lesson 3 of 6
External CSS: How to Link a Stylesheet to Many Pages
All lessons in Module 9
Goal: Share one stylesheet across pages, then override it with your own rules.
Learn
A real site has many pages that should look alike. Copy a <style> block into each one and you will be fixing twenty pages the day you change a color. Put the CSS in its own file instead, an external stylesheet such as style.css, and link it from every page:
<link rel="stylesheet" href="style.css">
Edit the file once and every page follows. Browsers also download it once and keep it in their web cache (opens in a new tab), so later pages load faster.
A .css file holds CSS rules and nothing else, so no <style> tags. When two rules style the same thing with equal weight, the later one wins. A <style> placed after the link can therefore adjust the shared look for one page.
The short version
- You can add CSS with the style attribute, a
<style>element or an external file. Real sites reach for the external file first. - A .css file holds CSS rules only, with no HTML tags.
- Order in the head counts. With equal specificity, a
<style>after the link overrides it, and one before it loses. - The
hrefstarts from the HTML page, so pages in subfolders need a different path or a root path like/style.css.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shared Look</title>
<link rel="stylesheet" href="style.css">
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1>Page One</h1>
<p>Styled by style.css, plus one local tweak.</p>
</body>
</html>Your task
The Neighborhood Newsletter should match the rest of the site and get a headline color of its own:
- Link the shared stylesheet
style.cssin the head. The preview changes at once. - After the link, add a
<style>element. - In it, write an
h1rule that sets acoloryou like. It comes later, so it beats the shared file.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<style>
h1 {
color: teal;
}
</style>
<link rel="stylesheet" href="style.css">Right
<link rel="stylesheet" href="style.css">
<style>
h1 {
color: teal;
}
</style>Here the shared file comes later, so its h1 color wins and the page's own tweak never appears.
Wrong
<!-- this page is blog/post.html, the CSS is in the site root -->
<link rel="stylesheet" href="style.css">Right
<!-- this page is blog/post.html, the CSS is in the site root -->
<link rel="stylesheet" href="../style.css">A relative path starts in the page's own folder, and ../ climbs one level up to the root.
Go deeper
The cascade in Cascading Style Sheets is what you just practised. Rules from several sources flow together, and the browser picks the winning declaration by importance, then specificity, then order, as the W3C CSS Cascading and Inheritance (opens in a new tab) spec lays out. The browser's own default styles enter that flow first. That's why an unstyled <h1> is already big and bold.
External files are faster mainly because of caching. After the first visit, the stylesheet comes from the browser cache. The downside: visitors may hang on to an old version after you update it. Sites get around this with cache busting, changing the URL whenever the file changes, for example style.css?v=2, so browsers fetch the new copy.
A link can also aim at one situation with the media attribute. <link rel="stylesheet" href="print.css" media="print"> applies only when the page is printed, a handy way to hide menus on paper. The link element reference lists its other attributes.
Don't chain files with @import inside CSS. The browser finds the imported file only after it has downloaded the first one, and rendering waits. Separate <link> elements in the HTML load in parallel.
Frequently asked questions
What are the three ways to add CSS to HTML?
Inline CSS is a style attribute on one element. Internal CSS is a <style> element in the head that styles one page. External CSS is a separate .css file linked with <link rel="stylesheet" href="style.css"> and shared by every page that links it (the HTML standard calls this the stylesheet link type (opens in a new tab)). Websites use external stylesheets as the standard. Keep the other two for experiments and small tweaks on a single page.
Why is my external CSS not working?
Go through these in order. Does the link have rel="stylesheet" and href (and no src)? Is the path right from the HTML file, capital letters included (see relative and absolute paths)? Does the file really end in .css, with no <style> tags inside? Is the browser showing an old cached copy? Reload with Ctrl+Shift+R (Cmd+Shift+R on a Mac). Also, one missing } in the CSS can break every rule after it.
Can I link more than one CSS file?
Yes, one <link> per file. They apply in order, so among equally specific rules the file linked last wins. A common setup is a shared base file for the whole site, then a smaller file for one section or page. Don't go overboard: each file is a separate download on a visitor's first trip.
Tags in this lesson
Read next
HTML vs CSS vs JavaScript, and what each one does
HTML vs CSS vs JavaScript with one quiz card built three times, a layer at a time, so you can see what each language adds. Plus a comparison table and which to learn first.
How to make a website with HTML, from empty folder to live site
Build a two-page bakery website by hand: pick an editor, set up a folder, write index.html, add photos, links and one CSS file, test it on a phone and publish it for free.