File Paths: How a Browser Finds a File

Your stylesheet lives right next to your page today, carrying the palette from the last lesson, and href="styles.css" finds it without help. This lesson adds nothing new to look at. It moves that file into a folder, breaks the link that finds it, then repairs it. Along the way, you learn exactly how a browser turns an address like that into an actual file.

The concept

Here is your page as it stands, three tabs and all. 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>
    <link rel="stylesheet" href="styles.css" />
  </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.

Notice the third tab, css/styles.css. It holds only a comment and does nothing yet. This lesson gives it a job.

Right now, index.html and styles.css sit in the same folder, so the bare name styles.css is enough to find it. Move the rules into that empty folder, update the address to match, and run this:

THE SAME LOOK, ONE FOLDER DEEPER · 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

Same page, same colours, same border. Nothing changed on screen, even though the CSS now lives one folder deeper. The only difference is the href value: css/styles.css instead of styles.css.

That address is a relative path: a route read starting from wherever the current page itself lives, not from a fixed starting point. css/styles.css reads as: from here, step into a folder named css, then look for styles.css inside it. Move the page, move the file, or leave one behind, and that same text can point somewhere new, or nowhere at all.

The syntax

A relative path can take a few shapes:

<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="./styles.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="../styles.css" />

The first two lines mean the same thing. ./ reads as "start right here, in this same folder." Leaving it off says the same thing by default. Most pages skip it for that reason. The third line steps into a subfolder before looking for the file. The fourth steps out, into the parent of the current folder, one level per ../. In this sandbox, and for a file on your own disk, a page already at the top has nowhere above it, so that last line fails. On a deployed site the browser clamps the extra step at the root instead.

An absolute path works differently. It does not read from the current page at all. It reads from one fixed starting point.

<link rel="stylesheet" href="/styles.css" />

A leading / means: start over at the top of the site, no matter where the page sits. Run it:

AN ADDRESS THAT STARTS FROM THE TOP · 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

On a page with only one file, the top level and the current folder are the same place. This resolves exactly like the relative version. The difference shows up once a site has more than one page, spread across folders at different depths. A page three folders deep can still reach a shared stylesheet with /styles.css. A relative styles.css written on that same deep page would look beside itself instead, and likely fail. A full web address, such as href="https://example.com/styles.css", is absolute too. It loads a stylesheet from anywhere on the web, not only your own project, the way a shared font service gets linked in. Your own CSS lives beside your own page, so a relative path fits here.

Whichever form you write, the browser matches it letter for letter. styles.css and Styles.css name two different files as far as most web servers are concerned. There is no near enough.

A minimal working example

index.html

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

css/styles.css

h1 {
  color: darkslateblue;
}

One relative path, one folder deep. The address in href and the real location of the file agree, so the rule applies.

Common mistakes

You move your CSS into a folder, and the whole page goes unstyled with no error anywhere. The rules are not missing. They are one folder away from where the old address still points. Run the exact break below:

THE FILE EXISTS, ONLY NOT WHERE THIS ADDRESS LOOKS · 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

href="styles.css" never changed, but the real file moved to css/styles.css. The two no longer agree, and nothing on screen says so.

Your filename looks right, except for one capital letter. href="Styles.css" will not find a file saved as styles.css. Run it:

ONE CAPITAL LETTER, NO MATCH · 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

Case counts as part of the name. A single capital in the wrong place is enough to break the match, even though the text looks almost identical at a glance.

You add one ../ too many, expecting to reach a folder above your project. Run this:

ONE '../' TOO MANY · 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

In this sandbox, and for a file on your own disk, there is nowhere above the project to look, so this fails. A deployed website behaves differently: the browser quietly ignores the extra step and reads the address from the site's top.

None of these three throw a visible error inside a sandbox like this one. On a real deployed page, you are not left guessing. Download this lesson's files, open index.html in a real browser, then open its developer tools and check the Network tab. A failed stylesheet request shows up there by name, with the exact address the browser tried and could not find.

Try it yourself

Your stylesheet still sits flat, right next to your page, with the colours you chose in the last lesson. Move it, break its address on purpose, then bring it home again. After each Run, scroll the preview to Skills if you do not see your Skills styling yet.

Run the starting code below. Scroll the preview to Skills if you do not see it yet. Confirm your page looks fully styled with your colours and the Skills border you already have. Notice the third tab, css/styles.css, holds only a comment and does nothing yet.
Cut the rules out of styles.css and paste them into css/styles.css. Leave styles.css empty, or with a comment in its place.
In index.html, change the <link>'s href from styles.css to css/styles.css.
Run it. Scroll to Skills. Confirm the page looks exactly as it did in step 1. That sameness proves the new address is correct.
Break it on purpose: change the href back to styles.css, without moving the rules back. Run it. Confirm the page loses your styling, with no error message anywhere.
Repair it: change the href back to css/styles.css. Run it. Scroll to Skills. Confirm your colours come back.
Move the rules back out of css/styles.css and into styles.css, restoring that file. Leave css/styles.css empty, or with a comment, once again.
Change the href in index.html back to styles.css. Run it. Scroll to Skills. Confirm the page looks exactly as it did when you started this lesson, flat again, with your styling intact.

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 stylesheet is back where it started, and you know exactly why that short address ever worked at all. The next lesson turns to the letters themselves: a font stack, sizing, spacing between lines, and weight.