HTMLpad

How to Link CSS to HTML (With Examples You Can Edit)

By · · 5 min read

A sheet of plain markup and a sheet of colour swatches lying side by side on a desk, joined by a thin orange thread

To link CSS to HTML, add a <link rel="stylesheet" href="style.css"> tag inside the <head> of your page, pointing at your CSS file. The browser loads that file and applies its rules to the page. You can also write CSS straight into the page with a <style> tag, or on one element with a style attribute.

That one line is all most pages need. The rest of this guide covers where the line goes, how the path in href works, when the other two methods make sense, and what to check when the styles refuse to show up. Each example has a link that opens it in HTMLpad, so you can change it and watch the result.

Here is a complete page that loads a stylesheet from another address. The stylesheet is Water.css, a small public stylesheet that styles plain HTML without any classes, which makes it easy to see the effect.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linked stylesheet</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
</head>
<body>
  <h1>This page uses an external stylesheet</h1>
  <p>Delete the link line in the head and watch the styles disappear.</p>
  <button>A styled button</button>
</body>
</html>

Try this example in HTMLpad

Three parts of the tag matter:

How the path in href works

Most broken stylesheets are broken paths. The path is read from the folder where the HTML file sits, not from the root of your computer.

Your files What to write in href
index.html and style.css in the same folder style.css
style.css inside a css folder next to the page css/style.css
The page inside a pages folder, the CSS one level up ../style.css
The CSS at the root of your website /style.css

A path that starts with a slash is read from the root of the website. That works once the site is online, but not when you double-click the file on your computer, because then the "root" is your whole disk. If a stylesheet loads online and not locally, or the other way round, a leading slash is the usual reason.

Paths are also case sensitive on most web servers. Style.css and style.css are two different files there, even if your laptop treats them as one.

The other two ways to add CSS

A style tag. You can put the CSS itself inside the page, in a <style> element in the head. This is how most single-file pages work, including pages made by AI assistants, and it is the simplest option when the page will be shared as one file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Embedded styles</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 2rem auto; }
    h1 { color: #b93421; }
    .note { background: #fff4e5; padding: 1rem; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>Styles written in the page</h1>
  <p class="note">Change the colour in the style tag and this box updates.</p>
</body>
</html>

Try this example in HTMLpad

A style attribute. You can style a single element with style="color: red". It is handy for a quick test, but it does not scale: every element has to be styled one by one, and a separate stylesheet cannot easily override it.

Which one should you use? A separate file when several pages share the same look, because you change it once and every page follows. A style tag when the page lives on its own, such as a report, a mockup or a page you will share as a link. Attributes only for one-off tweaks.

Linking more than one stylesheet

You can add as many link tags as you need. They apply in order, so when two files set the same thing, the later one wins. That is why a common pattern is a general stylesheet first and your own adjustments after it:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<link rel="stylesheet" href="my-changes.css">

When the stylesheet does not load

Work through these in order:

  1. Open the CSS address on its own. Paste the full address into the browser. If you get a 404 page, the path is wrong.
  2. Check the developer tools. Press F12, open the Network tab and reload. Chrome's guide to the Network panel shows how to read it. A red line next to your CSS file shows the problem and its status code.
  3. Check rel="stylesheet". A missing or misspelt rel is easy to overlook.
  4. Check the file itself. One unclosed brace in a CSS file can switch off every rule after it.
  5. Clear the cache. Browsers keep old stylesheets for a while. A hard reload, Ctrl+Shift+R or Cmd+Shift+R, fetches the new one.

If you are publishing a single page, the simplest fix is often to move the CSS into a style tag, so there is no second file to lose. I explain this and other common upload problems in how to share an HTML file as a link, and the basics of the files themselves in what an HTML file is. If you are new to editing pages, how to edit an HTML file and the guide to opening HTML files are good next steps.

Frequently asked questions

Inside the <head> of the page, usually after the <meta charset> and <title> tags. That way the styles load before the browser draws the page.

Yes, as long as the file is public. Use its full address, starting with https://. Public stylesheets and font files are often served from content delivery networks such as jsDelivr for exactly this reason.

Why does my CSS work on my computer but not online?

Usually because of the path. A path starting with a slash works differently on your disk and on a server, and most servers treat upper and lower case letters as different. Check that the file was uploaded too.

Is a style tag worse than a separate CSS file?

Not for a single page. A style tag keeps everything in one file, which is easier to share. A separate file is better when several pages use the same styles, because you only update it once.

More in Open and Edit HTML