How to Link CSS to HTML

1. Create an HTML file and a CSS file

Start with a simple project containing an HTML document and an external stylesheet. Keeping the files separate is the normal approach for reusable page styling.

project/
├── index.html
└── styles.css

The HTML file contains the document structure. The CSS file contains the rules that describe how that structure should look.

2. Link the CSS file from the HTML head

Inside the <head> element, add a <link> element:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello, CSS!</h1>
    <p>This page is styled by an external stylesheet.</p>
  </body>
</html>

The important part is <link rel="stylesheet" href="styles.css">. The rel attribute identifies the resource as a stylesheet, while href supplies its URL.

3. Add CSS rules to the stylesheet

Now put CSS rules in styles.css:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

h1 {
  color: rebeccapurple;
}

p {
  max-width: 60ch;
}

Save both files and open the HTML page in a browser. The browser loads the stylesheet and applies its rules to the HTML document.

4. Use the correct path when the CSS file is in another folder

The value of href must match the CSS file location relative to the HTML document. For example:

project/
├── index.html
└── css/
    └── styles.css

Because index.html is one directory above styles.css, use:

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

If the HTML file is inside a directory and the stylesheet is elsewhere, use ../ to move up one directory level. For example:

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

5. Link more than one stylesheet

A page can use multiple external stylesheets. Add another <link rel="stylesheet"> element for each stylesheet you want to load:

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="print.css" media="print">

The optional media attribute can restrict a stylesheet to a particular media condition. In this example, print.css is intended for printing.

6. Test the complete example

The following small example has two files. The HTML explicitly links the CSS file, and the CSS changes the appearance of the heading and card.

7. Fix a stylesheet that is not loading

When a CSS file appears to be ignored, the problem is often the resource URL rather than the CSS rule. Check these in order:

1. 1

   Check the filename. styles.css and style.css are different filenames on case-sensitive systems.

2. 2

   Check the relative path in href. Make sure it is correct from the HTML document that contains the link.

3. 3

   Open the stylesheet URL directly in the browser or inspect the Network panel in developer tools. A missing file commonly appears as a 404 response.

4. 4

   Check the browser console and Network panel for loading or security errors.

5. 5

   If the stylesheet loads but a rule has no visible effect, then investigate selectors, the cascade, specificity, media conditions and whether another rule overrides it.

8. Know the difference between external, internal and inline CSS

Linking a separate file is the external stylesheet approach. HTML can also contain a <style> element for an internal stylesheet, or a style attribute for inline styles.

<!-- External stylesheet: usually the reusable choice -->
<link rel="stylesheet" href="styles.css">

<!-- Internal stylesheet: rules live in this document -->
<style>
  p { color: steelblue; }
</style>

<!-- Inline style: a rule applies directly to one element -->
<p style="color: steelblue;">Hello</p>

9. Use a clean project structure

As a project grows, grouping stylesheets into a dedicated directory keeps paths predictable:

my-site/
├── index.html
├── about/
│   └── index.html
└── css/
    ├── base.css
    └── components.css

From index.html, a stylesheet in css/ is referenced as css/base.css. From about/index.html, the same stylesheet is referenced as ../css/base.css. The URL must always be correct for the document that contains the <link>.

The pattern to remember

For the standard external stylesheet case, the complete pattern is simply:

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

Put the <link rel="stylesheet"> in the document head, make href point to the actual CSS resource, and let the stylesheet contain the rules that style the HTML. When something does not work, verify the resource path and loading response before debugging the CSS itself.