How to Link a Separate style.css File

A separate CSS file keeps the structure of a webpage in HTML and its design rules in CSS. This practical tutorial shows you how to connect the two files, check that the link works, and solve the most common file-path problems.

For the core concepts, read How do you code in CSS? on Playcode123.com. You can also use the CSS examples and test small changes in the Playcode123 Sandbox.

Why use a separate CSS file?

You can write CSS inside an HTML document, but a separate file is easier to manage when a project grows. One stylesheet can also be used by several pages.

  • Your HTML stays focused on content and structure.
  • Your CSS stays focused on colors, spacing, fonts, and layout.
  • You can change the design of several pages from one file.
  • Repeated CSS does not need to be copied into every HTML page.

Create the project folder

Create a folder named my-website. Inside it, create these two files:

my-website/
├── index.html
└── style.css

The filenames must match exactly. On many web servers, style.css and Style.css are different names.

Step 1: add the HTML

Open index.html and add this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My CSS Project</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <h1>My first external stylesheet</h1>
    <p>This page gets its design from style.css.</p>
    <button>Test button</button>
  </main>
</body>
</html>

The important line is:

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

rel="stylesheet" tells the browser what kind of file is linked. href="style.css" tells it where to find that file. Put this <link> element inside the <head>.

Step 2: add the CSS

Open style.css and add:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #eef4fa;
  color: #1d2a38;
}

.page {
  max-width: 640px;
  margin: 60px auto;
  padding: 32px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

button {
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background-color: #0757a8;
  color: white;
  cursor: pointer;
}

Save both files, then open index.html in your browser.

Expected result

You should see a light-blue page with a centered white panel. The button should have a blue background and white text. If you only see plain black text on a white page, the HTML works but the stylesheet is probably not connected.

Check whether the CSS file is connected

Make an obvious temporary change in style.css:

body {
  background-color: yellow;
}

Save the file and refresh the browser. If the background turns yellow, the connection works. Remove the temporary rule or change it back when you are finished.

Common mistakes and fixes

  • Wrong filename: check that the file is really named style.css, not style.css.txt.
  • Wrong folder: when both files are in the same folder, use href="style.css".
  • CSS in a subfolder: if the file is at css/style.css, use href="css/style.css".
  • Capital letters do not match: use exactly the same capitalization in the filename and link.
  • Unsaved changes: save both files before refreshing the page.
  • Cached version: try a hard refresh with Ctrl+F5 on Windows.
  • HTML typed into the CSS file: style.css should contain CSS rules only, without <style> tags.

Using a CSS folder

Many projects place stylesheets in a separate folder:

my-website/
├── index.html
├── about.html
└── css/
    └── style.css

Both HTML files can then use:

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

This path starts from the location of the HTML file. File paths are relative to the document that contains the link.

Exercise: add a second page

Create about.html in the same folder as index.html. Link it to the same stylesheet and add a heading and paragraph. Then change the button color in style.css. Refresh both pages and confirm that the shared design changes wherever the matching CSS is used.

Final check: confirm that every filename and folder name matches the path in the HTML, both files are saved, and the browser shows your latest CSS after a refresh.