External Stylesheet: Giving CSS Its Own Home

Your sections carry classes, and your style block now holds three rules stacked on top of each other. That block only grows from here: every new rule joins the same tags, in the same file as your markup. This lesson moves those rules into their own file, styles.css, and connects it with one new element, <link>. Same look, new home.

The concept

Here is your page as it stands, with three rules inside one <style> block. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <style>
      h1 {
        color: darkslateblue;
      }
      .block {
        background-color: lavender;
      }
      #skills {
        border: 2px solid teal;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat">GitHub</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

That block works. It also crowds the page. HTML describes your content. CSS describes its look. Right now both live in the same file, stacked on top of each other.

Below, this lesson's sandboxes carry two files instead of one: index.html and styles.css. Tabs above the editor let you switch between them. Here are the same three rules, moved out of index.html and into styles.css. Run it:

THE SAME LOOK, FROM A LINKED FILE · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Nothing on screen changed. The heading is still dark slate blue. Skills still has its border and its lavender background. The only difference is where the rules live now: in their own file, reached by one line in <head>.

That connection is an external stylesheet: a .css file kept apart from your HTML, linked into the page with a <link> element.

The syntax

A <link> element goes inside <head>, next to <title>:

<head>
  <meta charset="UTF-8" />
  <title>Your Name</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<link> is a void element, like <img>. It never wraps content, and it never gets a closing tag. Two attributes do the connecting:

rel, short for relationship, tells the browser what kind of resource this is. For CSS, the value is always stylesheet.
href names the file to fetch, the same way src names an image file on <img>. Point it at a file, and the browser fetches it.

Inside styles.css itself, write rules exactly as you did inside <style>, only without the surrounding tags:

h1 {
  color: darkslateblue;
}

No <style>. No <html>. A .css file holds rules, and nothing else.

styles.css sits right next to index.html here, so its bare name is enough for the browser to find it. A later lesson moves that file and shows what happens when the address and the real location disagree. For now, hold onto one fact: a wrong filename means the browser cannot find the file, and the page renders unstyled with no warning.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>First linked stylesheet</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Your Name</h1>
  </body>
</html>

styles.css

h1 {
  color: darkslateblue;
}

One <link>. One rule, living in its own file. One visible colour change, exactly as it was when the rule sat inside <style>.

Common mistakes

You link the file, Run, and every style vanishes with no error message. Compare the filename in href against the actual file, letter by letter. href="style.css" will not find a file named styles.css. A missing or extra letter is enough. The browser requests exactly what you typed, finds nothing, and stays silent. Here is that exact break, side by side with the correct file. Run it:

A LINK THAT CANNOT FIND ITS FILE · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

The filename looks right, but the page still renders unstyled. Check the rel attribute. <link href="styles.css" /> with no rel="stylesheet" does not tell the browser what to do with the file it fetches. Without rel, the connection exists but the browser never treats the response as CSS.

You moved the rules into styles.css, but the page is only partly styled, and the file is not empty. Open the file and check what you pasted. A common habit from the last lesson is copying the whole <style>...</style> block, tags included, into the .css file. A .css file expects bare rules only. The first rule in the file silently stops working, because the stray tag gets glued onto its selector, while the rules after it still apply. A page that is only partly styled after the move is this mistake's signature.

Try it yourself

Your profile page still keeps its CSS in a <style> block. Give it a real stylesheet. After each Run, scroll the preview to Skills if you do not see the teal border yet.

Run the starting code below. Scroll the preview to Skills if you do not see it yet. Confirm your page looks exactly as it did at the end of the last lesson: a coloured name, lavender sections, a bordered Skills. Notice the second tab, styles.css, holds only a comment and changes nothing yet.
Cut the three rules out of the <style> block in index.html and paste them into styles.css. Remove the now-empty <style> tags from index.html.
In their place, inside <head>, add <link rel="stylesheet" href="styles.css" />.
Run it. Scroll to Skills. Confirm the page looks exactly the same as step 1. Same colours, same borders, same layout. That sameness is the proof the link worked.
Break it on purpose: change href="styles.css" to href="style.css", one letter short. Run it. Confirm every rule disappears with no error message anywhere in the preview.
Fix the href back to styles.css. Run it. Scroll to Skills. Confirm your styling returns.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your CSS now lives where CSS belongs, and your HTML holds markup alone. The two are joined by one line: href="styles.css". The next lesson gives your page a real palette: named colours, hex codes, and rgb values that make it recognisably yours.