How to Link Your CSS File to Your HTML

Published on October 2, 2025

HTML + CSS

When building a website, you’ll often want to separate your markup (HTML) from your styling (CSS). The easiest and most common way to do this is by creating a separate CSS file and then linking it to your HTML document. This helps keep your code clean, organized, and easier to update later.

Step 1: Create Your files

First, make sure you have two separate files:
An HTML file (for example: index.html)
A CSS file (for example: style.css)
Your project folder might look like this:

/project-folder
  ├── index.html
  └── style.css

Step 2: Add the <link> Tag in HTML

To connect your CSS file, open your HTML file and add a <link> tag inside the <head> section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This text will be styled by CSS.</p>
</body>
</html>

Here’s what’s happening in the <link> tag:
rel="stylesheet" tells the browser this file is a stylesheet.
href="style.css" points to the name of your CSS file. The value passed into the href tag can change depending on where your CSS file is located, make sure to configure it to the correct path.

Step 3: Write some CSS

Now that your CSS is linked, you may now beggin to write CSS and style your markup (HTML). For example:

/* style.css */
body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
}

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
}

Conclusion

Linking your CSS file to your HTML is one of the first steps in web development. By keeping your CSS separate, your project becomes easier to read, configure, and maintain. Once you understand this setup, you’ll be ready to explore the world of web development.