How to Link CSS to HTML
To link CSS to HTML, add a <link> tag inside the page’s <head>: <link rel="stylesheet" href="styles.css">. The href is the path to your CSS file. You can also write CSS inside a <style> tag or in a style attribute, but an external file is best for real websites.
Last updated: October 4, 2026
Quick answer
The three ways to add CSS to HTML
There are three places CSS can live. All three work in every browser, but they suit different jobs:
- External stylesheet: CSS in its own
.cssfile, connected with<link>. One file can style every page of your site. - Internal CSS: CSS inside a
<style>tag in the page’s<head>. It only styles that one page. - Inline CSS: CSS in a
styleattribute on a single element. It only styles that one element.
Most real sites use an external stylesheet for almost everything, and the other two only for special cases.
Method 1: Link an external CSS file (recommended)
- Create a new file next to your HTML file and name it
styles.css. The name can be anything, but it must end in.css. - Write your CSS rules in it, with no
<style>tags: for examplebody { background: #f1f5f9; }. - In your HTML file, inside
<head>, add<link rel="stylesheet" href="styles.css">. - Save both files and reload the page in the browser.
rel="stylesheet" tells the browser what the linked file is for, and href says where to find it. The <link> tag has no closing tag.
The example below links to a real stylesheet hosted online (the free Water.css theme), so you can see an external file at work. Delete the <link> line and the styling disappears.
The big advantage: change one rule in styles.css and every page that links to it updates. The browser also downloads the file once and reuses it from its cache as people move between your pages, so the site loads faster.
Getting the href path right
The most common reason “my CSS isn’t working” is a wrong path in href. The path is relative to the HTML file:
| Where the CSS file is | What to write in href |
|---|---|
| Same folder as the HTML file | styles.css |
In a css folder next to the HTML file | css/styles.css |
| One folder up from the HTML file | ../styles.css |
| At the root of your website | /css/styles.css (works on a web server, not when opening files from your computer) |
| On another website (a CDN) | The full address, starting with https:// |
File names are case-sensitive on most web servers: Styles.css and styles.css are two different files.
A simple folder structure for a small site
Keeping files in predictable folders makes the paths easy to get right. A common layout for a small website looks like this:
Both index.html and about.html link the same file with <link rel="stylesheet" href="css/styles.css">. If you later add a page inside a subfolder, such as blog/post.html, its link needs to go up one level first: href="../css/styles.css". A path starting with / (/css/styles.css) works from any folder once the site is on a web server, which is why many sites use it.
Method 2: Internal CSS with the <style> tag
For a single page, a quick test or an email template, you can put the CSS straight into the page. Add a <style> element inside <head> and write normal CSS rules between its tags.
Internal CSS is handy, but it has to be copied into every page that needs it, and changing the design means editing every copy. Once a site has more than one page, move the rules into an external file.
Method 3: Inline CSS with the style attribute
Inline CSS goes directly on one element: <p style="color: red;">. Separate several properties with semicolons. It affects only that element, and it beats almost every other rule, so it’s hard to override later.
Use inline styles sparingly: for a one-off tweak, for HTML emails (many email programs ignore <link> and <style>), or when JavaScript sets a style. For everything else, use classes in a stylesheet.
Which CSS wins? Order and specificity
When rules from different places style the same element, the browser decides with two main checks:
- Specificity: a more specific selector wins. Inline styles beat IDs, IDs beat classes, and classes beat plain element selectors like
p. - Order: when two rules are equally specific, the one that comes later wins. That’s why a
<style>block placed after a<link>overrides the linked file, and why you should link a CSS framework before your own stylesheet.
You can link several stylesheets on one page. Each one gets its own <link> tag, and they’re applied in the order they appear.
External vs internal vs inline CSS
| Method | Styles | Reusable | Best for |
|---|---|---|---|
External <link> | Every page that links it | Yes, and cached by the browser | Real websites |
Internal <style> | One page | No | Single pages, quick tests, demos |
Inline style="" | One element | No | Emails, one-off tweaks, JavaScript |
Why isn’t my CSS working? Common mistakes
- Wrong path or file name. Check the folder, the spelling and the capital letters. Open the CSS address directly in the browser: if you get a “not found” page, the path is wrong.
- Missing
rel="stylesheet". Without it the browser downloads nothing useful. <style>tags inside the .css file. A CSS file contains only CSS rules. HTML tags in it break the first rule.- The link is in the wrong place. Put
<link>in<head>, not at the bottom of<body>, so the page doesn’t flash unstyled. - The browser shows an old version. Browsers cache CSS. Force a fresh copy with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).
- A typo in the CSS. A missing
}or;can silently cancel the rules after it. - Another rule wins. A more specific selector, or a rule that comes later, may be overriding yours. Right-click the element → Inspect to see which rule applies.