How to Create and Link a CSS File to Your Website

What a CSS file is and why you need one

A CSS file is a plain text document that holds all the styling rules for your website — colors, fonts, spacing, layout, borders, and everything else that controls how your pages look. Instead of writing style instructions inside your HTML file, you write them in a separate CSS file and tell your HTML to use it. This keeps your code organized and lets you reuse the same styles across multiple pages without rewriting them.

When a browser loads your website, it reads the HTML file first, sees the instruction to load your CSS file, then applies all those styling rules to the page. If you change something in the CSS file later — like making all your headings blue instead of black — that change appears on every page that uses that CSS file automatically.

Key Takeaways

A CSS file is a plain text document you create with any text editor, saved with the .css file extension.
You link a CSS file to your HTML by adding a single line in the section of your HTML document.
The path in the link must match where the CSS file actually sits in your folder structure, or the browser will not find it.
One CSS file can style multiple HTML pages, so you only have to update your styles in one place.
CSS files must be plain text — not Word documents or other formatted files — or the browser will ignore them.

Creating a new CSS file in your text editor

Open any plain text editor — Notepad on Windows, TextEdit on Mac, or a code editor like Visual Studio Code, Sublime Text, or Brackets. Do not use Microsoft Word or Google Docs, because they add hidden formatting that breaks CSS.

Start with an empty document. You can write CSS rules right away, or start with an empty file and add rules later. When you save the file, name it something descriptive like styles.css or main.css, and make sure the filename ends with .css. The .css extension tells your browser this is a stylesheet.

Save the file in the same folder as your HTML file, or in a subfolder — for example, a folder called css inside your project folder. Keep track of where you save it, because you will need to tell your HTML file exactly where to find it.

Writing your first CSS rules

CSS rules follow a straightforward pattern: you pick an HTML element (like h1 for headings or p for paragraphs), then write the styles you want to explore to it inside curly braces. Here is what a basic rule looks like:

h1 { color: blue; font-size: 32px; }

This rule says: make all h1 headings blue and 32 pixels tall. Each style instruction (called a property) ends with a semicolon. You can add as many properties as you want inside the braces.

Here are some common properties you will use: color changes text color, background-color changes the background, font-size controls text size, margin adds space around an element, and padding adds space inside an element. You can write multiple rules in one CSS file — one for h1, one for p, one for buttons, and so on.

Linking your CSS file to your HTML

Open your HTML file in your text editor. Find the <head> section near the top of the document — this is where you put information about the page that does not show up as visible content. Inside the <head>, add this line:

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

Replace styles.css with the actual name of your CSS file. The href attribute tells the browser where to find the file. If your CSS file is in the same folder as your HTML file, just write the filename. If it is in a subfolder called css, write href="css/styles.css" instead.

Save your HTML file. Now when you open the HTML file in a browser, the browser will load the CSS file and explore all your styles automatically. If the styles do not appear, the most common reason is that the path in the href does not match where the CSS file actually is — double-check the folder structure and the filename.

Checking that your CSS file is working

Open your HTML file in a web browser and look at the page. If your CSS styles are applied — colors are showing, text is sized correctly, spacing looks right — then your CSS file is linked correctly.

If the page looks unstyled (plain black text, no colors, default sizing), the browser could not find your CSS file. Right-click on the page and select Inspect or Inspect Element to open the browser's developer tools. Look at the Console tab for error messages. You will often see a message like "Failed to load resource: the server responded with a status of 404" followed by the path the browser tried to load. This tells you the path in your href does not match the actual location of the file.

Fix the path in your HTML file and save it, then refresh the browser. The styles should appear once the path is correct.

Organizing multiple CSS files as your project grows

As your website gets larger, you might want to split your CSS into multiple files — one for layout, one for colors, one for buttons, for example. You can link as many CSS files as you want by adding multiple <link> tags in your <head> section:

<link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/colors.css"> <link rel="stylesheet" href="css/buttons.css">

The browser loads them in order from top to bottom. If two files have conflicting rules for the same element, the rule in the file listed last wins. This is useful when you want one file to override another.

A common folder structure looks like this: your main HTML file sits in the root folder, and a subfolder called css holds all your stylesheet files. This keeps your project organized and makes it straightforward to find things as your site grows.

Frequently Asked Questions

What if I put my CSS file in a subfolder?

If your CSS file is in a subfolder, the href path must match. For example, if your file is in a folder called styles, write href="styles/styles.css". If it is nested deeper — in a folder called assets inside styles — write href="styles/assets/styles.css". The path always starts from the location of your HTML file.

Can I write CSS directly in my HTML file instead of a separate file?

Yes, you can write CSS inside a <style> tag in the <head> section of your HTML. However, a separate CSS file is better because you can reuse it across multiple HTML pages. If you change the CSS file once, all pages that link to it update automatically.

What happens if the browser cannot find my CSS file?

The browser ignores the missing file and displays your HTML without any styling — just plain text and default formatting. Check the developer console for error messages, then verify that the filename and folder path in your href match exactly where the file actually sits on your computer.

Do I need to restart my browser after changing my CSS file?

No, but you do need to refresh the page. Press Ctrl+R on Windows or Cmd+R on Mac, or click the refresh button in your browser. Sometimes the browser caches the old CSS file, so try a hard refresh: Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac.

Can I use spaces or special characters in my CSS filename?

Avoid spaces and special characters in filenames — they can cause problems with paths, especially when you move your site to a web server. Stick to letters, numbers, hyphens, and underscores. my-styles.css and main_styles.css work fine; my styles.css or my@styles.css can cause trouble.

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.