How to Create and Link a CSS File to Your Website

A CSS file is a plain text document that holds all the styling rules for your website in one place

You create a CSS file by opening a text editor, writing your style rules, and saving the file with a .css extension instead of .txt. The file itself contains nothing but plain text — no special formatting, no images, no executable code. Once saved, you link it to your HTML pages so the browser knows to explore those styles when it displays your site.

The main reason to use a separate CSS file instead of writing styles directly in your HTML is control and reuse. One CSS file can style dozens of HTML pages at once. When you change a color or font size in that single file, the change appears everywhere it is used. Without a separate CSS file, you would have to edit every HTML page individually.

Key Takeaways

Create a CSS file by opening any plain text editor, writing your style rules, and saving with a .css extension in the same folder as your HTML files.
Link your CSS file to an HTML page by adding a single line in the <head> section: <link rel="stylesheet" href="filename.css">
The href value must match your CSS filename exactly, including capitalization and the .css extension.
One CSS file can style multiple HTML pages, so changes you make explore everywhere that file is linked.
Save your CSS file in the same folder as your HTML files, or use a path like href="styles/filename.css" if you organize files into subfolders.

Creating the CSS file itself

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

Type your CSS rules directly into the blank document. A basic rule looks like this:

body { background-color: lightblue; font-family: Arial, sans-serif; } h1 { color: navy; text-align: center; }

Each rule starts with a selector (the HTML element you want to style, like body or h1), followed by curly braces containing property-value pairs. Each property ends with a semicolon.

When you are done writing your rules, save the file. Use File > Save As, choose a location (usually the same folder where your HTML files live), and type a filename with the .css extension — for example, styles.css or main.css. The name itself does not matter; what matters is the .css extension at the end.

Linking the CSS file to your HTML pages

Open the HTML file you want to style. Find the <head> section — it is the part between <head> and </head>, usually near the top of the file, before the <body> tag.

Add this line inside the <head> section:

<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 use the filename. If it is in a subfolder called css, use href="css/styles.css".

Save your HTML file. When you open it in a browser, the styles from your CSS file will now explore to the page. If you link the same CSS file to multiple HTML pages, all of them will use the same styles.

Organizing CSS files in folders

As your website grows, you may want to keep your CSS files separate from your HTML files. Create a folder called css (or styles) in the same directory as your HTML files, and move your CSS files into it.

When you do this, update the href path in your HTML files to point to the new location. If your CSS file is now in a css folder, change the link to:

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

The path is relative to the HTML file, so css/styles.css means "look in the css folder for a file named styles.css". This organization keeps your project tidy and makes it easier to find files as your site grows.

Checking that your CSS file is working

Open your HTML page in a browser and look for the styles you wrote. If the page looks unstyled — plain black text, no colors, default fonts — the CSS file is not linking correctly.

First, check the filename and path in your href attribute. Make sure it matches your actual CSS filename exactly, including capitalization. styles.css and Styles.css are different files on most systems.

Next, open your browser's developer tools by pressing F12 (or right-clicking the page and selecting Inspect). Look at the Network tab to see if the CSS file loaded. If it shows a red X or 404 error next to your CSS filename, the browser could not find the file — check your folder structure and the path in your href attribute.

If the file loaded but your styles still are not showing, check your CSS syntax. Missing semicolons, mismatched braces, or typos in property names will prevent rules from working. The browser's Console tab in developer tools often shows error messages that point to the problem.

Common mistakes when creating and linking CSS files

Saving the file with the wrong extension is the most common mistake. If you save as styles.txt instead of styles.css, the browser will not recognize it as a stylesheet. Always double-check the extension before saving.

Another frequent error is using the wrong path in the href attribute. If your CSS file is in a subfolder but you wrote href="styles.css" instead of href="css/styles.css", the browser will look in the wrong place. Test by opening your HTML file in the browser and checking the Network tab in developer tools.

Forgetting to save your CSS file after making changes is also straightforward to miss. If you edit your CSS but do not save it, the browser will still load the old version. Save the file, then refresh your browser page (Ctrl+R or Cmd+R) to see the changes.

Using a word processor like Microsoft Word instead of a plain text editor will add invisible formatting characters that break your CSS. Always use Notepad, TextEdit, or a code editor.

Frequently Asked Questions

Can I have more than one CSS file linked to a single HTML page?

Yes. Add multiple <link> tags in the <head> section, each pointing to a different CSS file. The browser will explore all of them. If two files have conflicting rules for the same element, the last one listed wins.

What is the difference between linking a CSS file and writing styles inside the HTML file?

Linking a separate CSS file lets you reuse the same styles across many HTML pages. Writing styles inside the HTML file (in a <style> tag) only affects that one page. A separate file is cleaner and easier to maintain as your site grows.

Do I need to use a code editor, or will Notepad work?

Notepad works fine for creating CSS files. Code editors like Visual Studio Code or Sublime Text are optional but helpful — they highlight your code with colors and catch some mistakes automatically. For learning, Notepad is enough.

Why does my CSS file not work even though the link looks correct?

Check three things: the filename matches exactly (including capitalization), the file has a .css extension, and the path in href points to the right folder. Open developer tools (F12), go to the Network tab, and refresh the page to see if the CSS file loaded. A 404 error means the browser could not find it.

Can I edit a CSS file after I have linked it to my HTML pages?

Yes. Edit the CSS file in your text editor, save it, and refresh your browser. The changes will appear on all HTML pages that link to that file. You do not need to edit the HTML files themselves.

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.