HTML CSS JavaScript Python Swift TypeScript SQL React

How to Create a CSS File

What you’ll build or solve

Create a CSS file and link it to your HTML so your styles apply across the page. You’ll end up with a .css file that loads correctly and is easy to update.

When this approach works best

This approach works best when you want reusable styles that apply across one or more pages.

Learn CSS on Mimo

CAREER PATHFull-Stack Developer

Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL

Beginner friendly

COURSECSS

Master styling and layout with CSS. Learn selectors, flexbox, grid, animations, and responsive design

Beginner friendly

Use it when you:

Style a multi-page site and want one place to manage design changes.
Keep HTML clean by moving styling out of inline attributes.
Share the same colors, spacing, and typography across components.

Skip this approach when:

You’re testing a one-off idea and want a fast experiment. A small <style> block can be quicker.
You’re working in a platform that manages CSS for you, such as some site builders.

Prerequisites

A text editor, such as VS Code
A browser
An HTML file to link the stylesheet to

Step-by-step instructions

Step 1: Create a `.css` file in your project folder

Create a new file next to your HTML file, or in a css/ folder. Name it something like styles.css.

Example project structure:

Open in Mimo

index.html
styles.css

Add a simple rule so you can confirm it loads:

CSS

Open in Mimo

body {
  font-family:system-ui,sans-serif;
}

What to look for:

If your editor adds .txt by mistake, rename the file so it ends in .css.

Step 2: Link the CSS file in your HTML `<head>`

Use a <link> tag in the <head> so the browser loads your stylesheet.

PHP

Open in Mimo

<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>My Page</title>
<linkrel="stylesheet"href="styles.css">
</head>
<body>
<h1>Hello</h1>
</body>
</html>

If your CSS file is in a folder, update the path:

Open in Mimo

<linkrel="stylesheet"href="css/styles.css">

What to look for:

If your styles don’t apply, the href path is usually wrong or the <link> tag is in the wrong place.

Step 3: Verify the CSS file is loading

Make a visible change, save, and refresh.

For example, add a background color:

CSS

Open in Mimo

body {
  font-family:system-ui,sans-serif;
  background: #f5f5f5;
}

What to look for:

If nothing changes, hard refresh the page because browser caching can hide updates.
In DevTools, check the Network tab for styles.css and confirm it’s not returning a 404.

Examples you can copy

Example 1: Basic HTML + CSS setup

PHP

Open in Mimo

<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>Starter</title>
<linkrel="stylesheet"href="styles.css">
</head>
<body>
<h1>Starter page</h1>
<p>This page uses an external stylesheet.</p>
</body>
</html>

CSS

Open in Mimo

body {
  font-family:system-ui,sans-serif;
  line-height:1.5;
}

h1 {
  font-size:2rem;
}

Example 2: CSS in a `css/` folder

Open in Mimo

<linkrel="stylesheet"href="css/styles.css">

Project structure:

Open in Mimo

index.html
css/
  styles.css

CSS

Open in Mimo

h1 {
  color: #222;
}

Example 3: Add a reusable button style

Open in Mimo

<buttonclass="btn">Save</button>
<buttonclass="btn">Cancel</button>

CSS

Open in Mimo

.btn {
  padding:10px14px;
  border:1pxsolid #ccc;
  border-radius:10px;
  background:white;
}

Common mistakes and how to fix them

Mistake 1: Putting the `<link>` tag in the `<body>`

What you might do:

Bash

Open in Mimo

<body>
<linkrel="stylesheet"href="styles.css">
<h1>Hello</h1>
</body>

Why it breaks:

Browsers expect stylesheets in the <head>. In the body, loading can be delayed or behave inconsistently.

Correct approach:

Move the <link> tag into the <head>.

Bash

Open in Mimo

<head>
<linkrel="stylesheet"href="styles.css">
</head>

Mistake 2: Using the wrong path in `href`

What you might do:

Open in Mimo

<linkrel="stylesheet"href="/styles.css">

Why it breaks:

A leading / points to the site root. If your file isn’t served from the root, the browser won’t find it.

Correct approach:

Use a relative path based on your HTML file location.

Open in Mimo

<linkrel="stylesheet"href="styles.css">

Mistake 3: Saving the CSS file with the wrong extension

What you might do:

You create styles.css.txt without noticing.

Why it breaks:

The browser won’t treat it as CSS.

Correct approach:

Rename it to styles.css.

Open in Mimo

styles.css

Troubleshooting

If styles don’t apply, check the href path and confirm the CSS file exists at that location.
If you see a 404 in DevTools, fix the folder path or file name casing.
If changes don’t show, hard refresh or disable cache in DevTools while reloading.
If only some styles apply, check for CSS syntax errors like a missing } or stray characters.
If you’re editing the right file but nothing updates, confirm you opened the correct index.html and not a copy in a different folder.