How to Connect a CSS Stylesheet to Your HTML File

The three ways to add CSS to HTML

You connect a CSS stylesheet to HTML by writing a single line in the <head> section of your HTML file. The most common method is the external stylesheet — a separate .css file that your HTML file links to. This keeps your styling separate from your content, makes it easier to reuse the same styles across multiple pages, and keeps your HTML file readable.

The other two methods — internal CSS (styles written inside the HTML file itself) and inline CSS (styles written directly on individual HTML elements) — work in specific situations, but external stylesheets are what you'll use for almost every real project.

Key Takeaways

External stylesheets use a single line in your HTML <head>: <link rel="stylesheet" href="styles.css">
The href attribute must match the exact filename and folder path where your CSS file is saved.
Your CSS file must be saved as a .css file, not as .txt or any other format, or the browser will ignore it.
The <link> tag goes in the <head> section, not in the body, so styles load before the page displays.

Linking an external CSS file

Create a new file in your text editor and save it with a .css extension — for example, styles.css. Write your CSS rules in this file. Then, in your HTML file, place this line inside the <head> section (between <head> and </head>):

The href attribute tells the browser where to find the CSS file. If your CSS file is in the same folder as your HTML file, just write the filename. If it's in a subfolder called css, write href="css/styles.css". If it's in a parent folder, write href="../styles.css". The path must be exact — if the browser can't find the file, it will silently ignore the link and your styles won't appear.

Here's what a complete HTML file looks like with an external stylesheet linked:

<!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello World</h1> </body> </html>

When to use internal CSS instead

Internal CSS means writing your styles inside a <style> tag in the <head> section of your HTML file. This works when you have only one HTML page or when you want styles that apply to only that one page.

Write it like this:

<head> <style> h1 { color: blue; } </style> </head>

Internal CSS is useful for quick testing or for a single-page project, but it clutters your HTML file and forces you to rewrite the same styles if you build a second page. External stylesheets are almost always the better choice once your project grows beyond one page.

When to use inline CSS

Inline CSS means adding a style attribute directly to an HTML element. For example: <h1 style="color: blue;">Hello</h1>. This applies the style to only that one element.

Inline CSS is useful only for quick testing or for a single style that truly applies to nowhere else on your site. It makes your HTML harder to read, makes it harder to change styles later, and defeats the purpose of separating content from design. Avoid it in real projects.

Troubleshooting: Why your CSS isn't showing up

If you've linked your CSS file but the styles aren't appearing, check these things in order. First, make sure the filename in your href attribute matches the actual filename of your CSS file exactly — including capitalization. styles.css and Styles.css are different files on most computers.

Second, verify that your CSS file is saved as a .css file, not as a .txt file or any other format. In most text editors, you choose the file type when you save. If you're not sure, right-click the file and check its properties or type.

Third, check the file path. If your HTML file is in a folder called project and your CSS file is also in project, then href="styles.css" is correct. If your CSS file is in a subfolder like project/css/styles.css, then href="css/styles.css" is correct. Open your file manager and trace the exact path.

Finally, open your browser's developer tools (usually F12 or right-click → Inspect) and look at the Network tab. If the CSS file shows a red error or a 404 status, the browser couldn't find it — fix the path. If the file loads but styles still don't appear, check your CSS syntax for errors like missing semicolons or curly braces.

Linking multiple CSS files

You can link more than one CSS file to the same HTML page. Write multiple <link> tags in your <head> section:

<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="responsive.css">

The browser loads them in order from top to bottom. If two files define the same style (for example, both set the color of h1), the one that loads last wins. This is useful for organizing your styles — you might keep general styles in one file, layout styles in another, and mobile styles in a third.

Frequently Asked Questions

Do I need to put the link tag in the head, or can it go in the body?

It should go in the <head>. When you put it there, the browser loads the CSS before it displays the page, so your styles are ready when the content appears. If you put the link in the body, the page might display unstyled for a moment before the CSS loads, which looks broken to the user.

What's the difference between href and src?

The <link> tag uses href because it's linking to a related resource. The <script> tag uses src because it's loading a source file to execute. They do the same job — point to a file — but the attribute name depends on the tag.

Can I link to a CSS file from a different website?

Yes. You can write href="https://example.com/styles.css" to load CSS from another site. This is how people use Google Fonts or Bootstrap. However, if that website goes down, your styles disappear. For production websites, it's safer to download the CSS file and host it yourself.

What if my CSS file is in a parent folder?

Use ../ to go up one level. If your HTML file is in project/pages/index.html and your CSS is in project/styles.css, write href="../styles.css". Each ../ moves up one folder level.

Do I need to refresh my browser to see CSS changes?

Usually yes. After you save changes to your CSS file, refresh the page in your browser (Ctrl+R or Cmd+R). Sometimes your browser caches the old CSS file, so a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) forces it to reload from disk.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.