The two ways to connect CSS to your HTML file
CSS does not automatically style your HTML. You have to tell the browser where to find the styling rules. The most common way is to link an external CSS file inside the <head> section of your HTML document using a <link> tag. The second way is to write CSS directly inside your HTML file using a <style> tag, also in the <head> section.
External CSS files are the standard approach because they let you reuse the same styles across multiple pages and keep your HTML cleaner. A <style> tag works when you have only one page or want to test something quickly, but it becomes harder to manage as your project grows.
There is also a third method — writing styles directly on individual HTML elements using the style attribute — but this approach creates problems when you need to change the same style in many places, so most developers avoid it.
Key Takeaways
- The <link> tag goes inside the <head> section and points to an external CSS file with rel="stylesheet" and href="filename.css".
- The file path in the href attribute must match where your CSS file actually sits — in the same folder, a subfolder, or a parent folder.
- A <style> tag in the <head> lets you write CSS rules directly in your HTML, useful for testing but harder to maintain across multiple pages.
- The browser reads the <head> section before displaying the page, so styles load before the content appears.
- If your styles are not showing up, the most common cause is an incorrect file path in the href attribute.
Linking an external CSS file with the <link> tag
Create a new file with a .css extension — for example, styles.css — and save it in the same folder as your HTML file or in a subfolder. Then, inside the <head> section of your HTML document, add this line:
<link rel="stylesheet" href="styles.css">
The rel="stylesheet" attribute tells the browser that this file contains styling rules. The href attribute points to the file. If your CSS file is in a subfolder called css, change the href to href="css/styles.css". If it is in a parent folder, use href="../styles.css".
Here is what a complete HTML document looks like with a linked CSS file:
<!DOCTYPE html><html><head><link rel="stylesheet" href="styles.css"></head><body><h1>Hello World</h1></body></html>
The <link> tag is self-closing — it does not need a closing tag. The browser loads the CSS file before it displays the page, so your styles are ready when the content appears.
Writing CSS directly in your HTML with a <style> tag
If you want to keep everything in one file, place a <style> tag in the <head> section and write your CSS rules inside it:
<!DOCTYPE html><html><head><style>h1 {color: blue;font-size: 24px;}</style></head><body><h1>Hello World</h1></body></html>
This approach works fine for a single page or while you are learning. The downside is that if you have ten pages and want to change a color everywhere, you have to edit ten separate files. With an external CSS file, you change it once and all pages update automatically.
Understanding file paths so your CSS actually loads
The most common reason styles do not show up is an incorrect file path. The browser looks for the CSS file relative to where your HTML file sits, not relative to your computer's root folder.
If your HTML file and CSS file are in the same folder, use just the filename: href="styles.css". If your CSS file is in a subfolder called css, use href="css/styles.css". If your CSS file is in a parent folder (one level up), use href="../styles.css". Two dots and a slash means "go up one folder".
Here is a typical folder structure and the correct paths:
| Folder Structure | Correct href Value |
|---|---|
| index.html and styles.css in the same folder | href="styles.css" |
| index.html in root, styles.css in a css subfolder | href="css/styles.css" |
| index.html in a pages subfolder, styles.css in root | href="../styles.css" |
| index.html in pages subfolder, styles.css in css subfolder (both in root) | href="../css/styles.css" |
Open your browser's developer tools (right-click the page and select Inspect) and look at the Console tab. If the CSS file did not load, you will see an error message with the path the browser tried to find. That tells you exactly what to fix.
When to use external CSS versus a style tag
Use an external CSS file when you have more than one HTML page or expect your project to grow. It keeps your HTML readable and lets you change styles in one place. Most professional websites use external CSS files.
Use a <style> tag when you are testing something quickly, building a single-page project, or learning HTML and CSS together. It is simpler to manage when everything is in one file.
Avoid putting styles directly on elements using the style attribute — for example, <h1 style="color: blue;"> — because it makes your HTML messy and your styles hard to change later. This method is only useful for quick experiments.
Troubleshooting when your CSS does not appear
If you linked your CSS file but the styles are not showing up, check these things in order. First, verify the file path in the href attribute matches where your CSS file actually sits. Open your file manager and confirm the CSS file exists and the folder structure matches your path.
Second, make sure the <link> tag is inside the <head> section, not in the <body>. The browser needs to read it before displaying the page. Third, check that you saved your CSS file with a .css extension, not as a text file or with a different extension.
Fourth, open your browser's developer tools (press F12 or right-click and select Inspect), go to the Network tab, and reload the page. Look for your CSS file in the list. If it shows a red X or a 404 error, the browser could not find it — the path is wrong. If it loads successfully, the problem is in your CSS rules themselves, not the connection.
Frequently Asked Questions
Can I link multiple CSS files to one HTML document?
Yes. Add multiple <link> tags in the <head> section, one for each CSS file. The browser loads them in order from top to bottom, so if two files style the same element, the lower one wins. This is useful when you have one file for general styles and another for a specific page.
Does the order of the <link> tag matter in the <head>?
The <link> tag can go anywhere in the <head> section, but it is common practice to put it near the top, after the <title> tag. The browser loads the entire <head> before displaying the page, so position does not affect when styles load — only which file wins if two files conflict.
What is the difference between rel="stylesheet" and other rel values?
rel="stylesheet" tells the browser the linked file contains CSS styling rules. Other rel values exist for different purposes — for example, rel="icon" links a favicon — but for CSS files, always use rel="stylesheet".
Can I use a CSS file from a different website?
Yes, you can link to a CSS file hosted on another website by using the full URL in the href attribute — for example, href="https://example.com/styles.css". This is common for loading fonts from Google Fonts or icon libraries, but for your own styles, keep the CSS file on your own server.
Why do some people use <style> tags in the <body> instead of the <head>?
Technically, <style> tags work in the <body>, but it is not standard practice. Putting them in the <head> ensures styles load before the page displays, preventing a flash of unstyled content. Always put <style> and <link> tags in the <head>.