External stylesheets, or moving your CSS into style.css

Every lesson so far kept its CSS in a <style> element at the top of the page, as set up in the first lesson. That works for one page. A real site has ten, fifty or five hundred, and they should all look the same. Copying the same <style> block into every file means that changing one color becomes fifty edits. The fix is to keep the CSS in its own file and point every page at it.

The link element

Create a plain text file called style.css in the same folder as your HTML page. Then, inside the page's <head>, add one line:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bench Notes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to the bench</h1>
</body>
</html>

rel="stylesheet" tells the browser what the linked file is for, and href says where to find it. The <link> element has no closing tag. Older tutorials add type="text/css"; in HTML5 that is the default, so you can leave it out.

What goes in style.css

Only CSS. No <style> tags, no HTML. The file starts with your first rule:

/* style.css */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: #1f2328;
}

h1 {
  font-size: 2rem;
  margin: 24px;
}

Comments use /* ... */, the same as inside a style tag. Save the file as UTF-8 plain text. If your editor offers "Rich Text" or saves it as style.css.txt, the browser will not find a stylesheet, because the name has to match the href exactly.

Getting the path right

The href is a path, worked out from the location of the HTML file that contains the link. A few common layouts:

href="style.css"        style.css sits next to the HTML file
href="css/style.css"    style.css sits in a folder called css
href="../style.css"     style.css sits one folder up
href="/style.css"       style.css sits at the root of the website

The last form, starting with a slash, is handy on a real site, since every page can use the same line no matter how deep it sits in the folder tree. It does not work when you open files straight from your disk, because then the "root" is the root of your drive.

Watch the capital letters too. Your laptop may treat Style.css and style.css as the same file, but most web servers run Linux, where they are two different names. A stylesheet that works at home and vanishes after upload is very often a case mismatch.

Why a separate file is worth it

Three things improve at once.

One file for many pages

Every page carries the same link line, and every page picks up an edit to style.css the next time it loads. The look of the site lives in one place.

Cleaner HTML

The page holds content and structure, the stylesheet holds the look. Each file is shorter and easier to read.

Caching

The first time a visitor loads a page, the browser downloads style.css and keeps a copy in its cache. When the visitor opens a second page that links the same file, the browser can reuse that copy instead of fetching it again, as long as the server's cache settings allow it. A <style> block, by contrast, is part of the HTML and gets downloaded again with every page.

Caching has one side effect you will meet quickly: you edit the CSS, reload, and nothing changes. The browser is still using its saved copy. A hard reload (Ctrl+Shift+R on Windows and Linux, Cmd+Shift+R on a Mac) fetches it fresh. Sites often add a version to the link, like href="style.css?v=2", so returning visitors get the new file too.

Link, style and order

You can link more than one stylesheet, and you can still have a <style> block on the same page. The browser reads them in the order they appear. When two rules have the same weight and set the same property, the one read later wins. So a <style> block placed after the <link> can override the shared file for one page. The selectors lesson explains what "the same weight" means.

CSS also has @import url("other.css");, which pulls one stylesheet into another. It works, but the browser only discovers the second file after it has downloaded and read the first, so the page can take longer to style. Separate <link> lines let the browser fetch both files at the same time.

Try it

The online HTML editor works on a single page, so there is no second file for a <link> to load. When a lesson from here on says "add this to style.css", paste those rules into a <style> element inside the <head> instead, in place of the link line. The result in the preview is the same. On your own computer, make a folder with index.html and style.css, open the HTML file in a browser, then change the h1 font size in the CSS file and reload to watch the link at work.