Load a CSS file

01 / 05

CSS lives in its own file

You can write CSS inside the HTML, but putting it in a separate file is the usual way.

however many pages you have, one CSS file will do
when you want to change how something looks, you know which file to open
the HTML is left holding nothing but contents, so it reads easily

02 / 05

The link tag joins them

HTML and CSS do not find each other on their own. You write a <link> tag inside <head> to say "use this CSS".

<link> is another tag with no closing tag.

<head>  <meta charset="utf-8">  <title>Willow Diner</title>  <link rel="stylesheet" href="style.css"></head>

03 / 05

The two attributes on link

<link> needs two attributes.

rel="stylesheet" … what kind of thing you are joining to. "This one is a stylesheet"
href="style.css" … where it is. Written the same way as the href on a link

Leave either one out and the CSS does nothing.

<link rel="stylesheet" href="style.css">

04 / 05

When nothing happens, check the file name first

The most common reason CSS does not work is a wrong file name in href.

style.css and styles.css, css/style.css and style.css — one character out and it cannot be loaded. The awkward part is that you get no error, just nothing at all.

05 / 05

How these exercises work

The preview in this app joins index.html and style.css for you, so the colours change even without a <link>.

In a real file, though, no <link> means no CSS. The point here is to get the writing of it into your hands, so the checks do look at the <link> line.