How to Link CSS to Your HTML File

The three ways to add CSS to HTML

CSS controls how your HTML looks — colors, spacing, fonts, layout. To make CSS work, you need to tell HTML where to find it. There are three methods: link an external CSS file (the standard way), write CSS inside your HTML file, or style individual HTML elements directly.

The external file method is what professional developers use because it keeps your code organized and lets you reuse the same styles across many pages. The other two methods work for small projects or testing, but they become messy as your site grows.

Key Takeaways

The most common method is linking an external CSS file using a <link> tag in your HTML <head> section.
The <link> tag must include rel="stylesheet" and href="yourfile.css" to work correctly.
You can also write CSS directly inside your HTML using <style> tags, but this only works for that one page.
Inline styles (CSS written directly on an HTML element) are the least flexible method and should be avoided for most projects.

Linking an external CSS file

This is the method you will use most often. Create a separate file with a .css extension — for example, styles.css — and save it in the same folder as your HTML file or in a subfolder called css.

In your HTML file, open the <head> section (the part between <head> and </head>, not the body). Add this line:

If your CSS file is in a subfolder, change the path. For example, if your CSS file is in a folder called css, write: <link rel="stylesheet" href="css/styles.css">

The rel="stylesheet" part tells the browser that this file is a stylesheet. The href is the path to your file. Without both of these, the browser will not load your CSS.

Writing CSS inside your HTML file

If you want to keep everything in one file, you can write CSS directly in your HTML using <style> tags. Place these tags in the <head> section, and write your CSS rules between the opening and closing tags.

Here is what it looks like:

<head> <style> body { background-color: lightblue; } h1 { color: navy; } </style> </head>

This method works fine for learning or for very small projects with only one page. The problem is that if you build a second page, you have to copy all your CSS again. If you later want to change a color across your whole site, you have to edit every file. External files avoid this problem.

Styling individual elements with inline CSS

You can also add CSS directly to a single HTML element using the style attribute. This is called inline CSS.

Here is an example:

<h1 style="color: red; font-size: 24px;">Welcome</h1>

This makes only that one heading red and 24 pixels large. Inline styles are useful for quick testing or one-off changes, but they clutter your HTML and make it hard to maintain. If you have ten headings and want to change them all from red to blue, you would have to edit each one separately. With an external CSS file, you change one rule and all ten headings update at once.

Checking that your CSS is actually loading

If you link a CSS file but the styles do not appear, the most common problem is a wrong file path. Open your browser's developer tools by pressing 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 error or says 404, the browser could not find the file.

Check three things: the file name is spelled exactly right, the path in your href matches where the file actually is, and the file is saved with a .css extension, not .txt or something else. If your HTML and CSS files are in the same folder, the path should be just the file name: href="styles.css". If the CSS file is in a subfolder, include the folder name: href="css/styles.css".

Combining multiple CSS files

As your project grows, you might want to split your CSS into multiple files — one for layout, one for colors, one for fonts, and so on. You can link as many CSS files as you need. Just add a separate <link> tag for each one in your <head> section.

The order matters: if two files set the same style, the one linked last wins. So if styles.css says headings are blue and colors.css says they are red, and colors.css is linked after styles.css, your headings will be red.

Frequently Asked Questions

Does the order of CSS files matter?

Yes. If two CSS files set the same style, the file linked last takes priority. If you link a general styles file first and then a specific overrides file, the overrides file will control the final appearance. This is useful for making exceptions to your main styles.

Can I use a CSS file from another website?

Yes. You can link to CSS hosted on another server by using the full web address in your href. For example: <link rel="stylesheet" href="https://example.com/styles.css">. This is how many developers load popular CSS libraries, but be aware that if the other website goes down, your styles will not load.

What if I have both external CSS and inline CSS on the same element?

Inline CSS wins. If your external file says a paragraph should be black but an inline style says it should be green, the paragraph will be green. This is why inline styles are best avoided — they override everything else and make your code harder to predict.

Do I need to put the link tag in the head section?

Yes, the <link> tag should go in the <head> section, not in the body. The browser reads the head first and loads all stylesheets before displaying the page. If you put the link in the body, the page might display unstyled for a moment before the CSS loads, which looks broken.

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.