02. Connect CSS to your page

A page only uses style.css when its <head> links to it. Add the <link> tag and watch the page change.

Your CSS lives in its own file, style.css, next to index.html. But the browser only reads it if the page asks for it, with a <link> tag in the <head>:

HTML

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Book Club</title>5    <link rel="stylesheet" href="style.css">6  </head>7  <body>8    <h1>Book Club</h1>9    <p>This month: Malgudi Days.</p>10  </body>11</html>

style.css has one rule: h1 { color: teal; }

rel="stylesheet" says what the linked file is, and href="style.css" says where to find it, just like a link's href. Like <img>, <link> has no closing tag.

One style sheet can be linked from every page of a website, so changing one file restyles them all.

Your turn

1Steps

1style.css is already written, but the page doesn't use it yet. Add a <link> in the <head> that links style.css, and the page should change.

Write it in index.html and style.css; the page shows as you type.

Starting code

The editor starts empty. Copy this into it to begin, or write your own from scratch.

index.html

HTML

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Science Club</title>5  </head>6  <body>7    <h1>Science Club</h1>8    <p>This week we're building a model volcano.</p>9  </body>10</html>

style.css

CSS

1h1 {2  color: teal;3}4
5p {6  color: dimgray;7  font-size: 18px;8}

2Expected output

Your page should have

There's a <link> with rel="stylesheet"
The <link> points to style.css
The <link> is inside the <head>
The style sheet works: the heading is teal

Submit answer checks each of these.

3Hints

Stuck? Open one hint at a time: each gives a bit more help.

Hint 1

The page needs one new tag, in the <head>, under the <title>.

Hint 2

It's a <link> tag with two attributes: rel (what kind of file) and href (which file).

Hint 3

rel is "stylesheet" and href is "style.css". <link> has no closing tag.