How CSS Reaches the Page

Your site has meaning now, but it looks the way every unstyled page has looked since the 1990s: black text, blue links, one font. Changing that is the job of CSS, short for Cascading Style Sheets. CSS is a list of rules, and each rule says "these elements should look like this". The rules live in a file of their own, linked from the HTML, so one change in one place restyles every page of the site.

A newspaper's style guide works the same way. It is written once and says how headlines, captions and quotes should look. Every writer follows it, and when the paper changes its headline font, it changes the guide, not a thousand articles. Your stylesheet is that guide for your site.

A Rule, Taken Apart

Here is a complete CSS rule. It is written in CSS, not HTML, so there are no angle brackets anywhere.

body {
  font-family: sans-serif;
  color: navy;
}

A rule has two parts. The selector, before the curly braces, picks which elements the rule applies to; here it is body, which picks the page's body element. Inside the braces are the declarations, one per line. Each declaration is a property, the thing to change, then a colon, then a value, what to change it to, and it ends with a semicolon. The first declaration sets the font to the browser's plain sans-serif font, one without the small strokes at the ends of letters. The second sets the text colour to navy.

Notice that the property is spelled color, the American way. CSS property names are fixed words, and a misspelled one is silently ignored: the browser skips any declaration it does not understand and carries on with the next.

Linking a Stylesheet

A file of CSS rules is called a stylesheet. Inside your my-site folder, create a folder named css, and inside it a file named style.css. Paste the rule above into it and save. Nothing changes yet, because no page knows the file exists.

A page asks for a stylesheet with a link element in its head. It is an empty element, like meta, with two attributes. rel, short for relationship, says what the linked file is to this page: a stylesheet. href is the path to it, the same kind of relative path that topic 3 of the last chapter drew.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Name</title>
  <link rel="stylesheet" href="css/style.css">
</head>

Add the link line as the last line of the head in all three pages. The path is the same in each, because all three pages sit in the same folder. Save, and look at the preview. Every page's text is now navy and in a plain sans-serif font. The links are still blue, for a reason topic 3 of this chapter explains. Now change navy to darkgreen in the stylesheet and save once: all three pages change together. That is the whole point of one linked file.

Three Places CSS Can Live

A linked file is the right default, but it is not the only place CSS can be written, and you will meet the others in other people's code. Here is the same colour set three ways, shown only so you can recognise them.

/* 1. In css/style.css, linked from every page */
p { color: darkgreen; }

<!-- 2. In a style element inside one page's head -->
<style>
  p { color: darkgreen; }
</style>

<!-- 3. In a style attribute on one element -->
<p style="color: darkgreen;">Hello</p>

All three turn paragraphs dark green, and the lines between the comment markers are notes for people, which the browser ignores. The first, the linked file, styles every page that links it. The second, a style element, styles only the page it is written in, so three pages need three copies. The third, a style attribute, styles only the single element it sits on.

The second and third feel quicker the first time. They are slower every time after that, because changing the design means finding and editing every copy, on every page. This book puts every rule in css/style.css.

The Browser's Own Styles

Before you wrote any CSS, headings were already large and bold, links were blue and underlined, and the page had a small margin around its edge. None of that came from HTML. Every browser has a built-in stylesheet, the default stylesheet, that gives each element a sensible look so that unstyled pages are readable. Your rules sit on top of it: wherever you set a property, your value replaces the browser's, and everything you leave alone keeps the default.

That is why HTML elements are chosen for meaning and not for size. A heading is large because the default stylesheet says so, and one line of your CSS can make it any size you like.

Seeing It in DevTools

Right-click a paragraph on your page and choose Inspect. Beside the tree in the Elements panel is the Styles pane, and it lists every rule that applies to the selected element, with the most important at the top. Your body rule appears under a heading saying it is inherited from the body, with a link on the right naming the file and line it came from, style.css line 1. Lower down, rules labelled "user agent stylesheet" are the browser's defaults; "user agent" is the formal name for the browser.

The pane is also a place to experiment. Click a value, such as the colour, and type a new one; each declaration also has a checkbox that switches it off and on. As in the Elements panel, these edits vanish on reload, and the real change belongs in your file.