HTML CSS JavaScript Python Swift TypeScript SQL React

How to Link CSS to HTML

What you’ll build or solve

You’ll connect an HTML page to CSS so changes in your stylesheet affect layout, colors, and typography.

When this approach works best

Linking CSS to HTML works best when you want to:

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

Style a full page with reusable rules, such as a site header and buttons across multiple pages.
Keep HTML clean by moving styling into a separate file.
Work on a team or a larger project where separate files make reviews and updates easier.

This is a bad idea when you are adding a single one-off style for a quick test. In that case, an inline style may be faster, but it does not scale.

Prerequisites

A basic HTML file you can open in a browser
A text editor, such as VS Code
No extra tools required

Step-by-step instructions

1) Link an external stylesheet with a `<link>` tag

This is the most common approach. Add a <link> tag inside the <head> of your HTML file.

Option A: Same folder (most common)

Project structure:

Open in Mimo

index.html
styles.css

index.html:

HTML

Open in Mimo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="styles.css" />
  <title>Demo</title>
</head>
<body>
  <h1 class="title">Hello</h1>
</body>
</html>

styles.css:

CSS

Open in Mimo

.title {
  color: rebeccapurple;
}

What to look for: the <link> tag belongs in <head>, and href must point to the correct file location.

Option B: CSS in a subfolder

Project structure:

Open in Mimo

index.html
css/styles.css

HTML

Open in Mimo

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

Option C: CSS one folder up

Project structure:

Open in Mimo

pages/index.html
styles.css

HTML

Open in Mimo

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

2) Use a `<style>` block for page-specific CSS

If you only need styles for one HTML page, you can keep them inside the file.

HTML

Open in Mimo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    .card {
      border: 1px solid #ddd;
      padding: 16px;
      border-radius: 10px;
    }
  </style>
  <title>Internal CSS</title>
</head>
<body>
  <div class="card">Card content</div>
</body>
</html>

What to look for: keep the <style> block in <head> so styles load before the page renders.

3) Use inline styles for a single element

Inline styles apply to one element only. Use them for quick tests or small overrides.

HTML

Open in Mimo

<button style="background: black; color: white; padding: 10px 14px;">
  Buy now
</button>

What to look for: inline styles override many stylesheet rules. If a class style is not working, check whether an inline style is taking priority.

Examples you can copy

Example 1: Minimal external link setup

HTML

Open in Mimo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="styles.css" />
  <title>Page</title>
</head>
<body>
  <p class="note">Styled text</p>
</body>
</html>

CSS

Open in Mimo

.note {
  font-weight: 600;
}

Example 2: Two stylesheets, base and page

HTML

Open in Mimo

<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="home.css" />

What to look for: later files can override earlier rules when selectors have the same specificity.

Example 3: Link a CDN stylesheet

HTML

Open in Mimo

<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />

What to look for: you need an internet connection for CDN styles to load.

Example 4: Add a cache-busting query string during development

HTML

Open in Mimo

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

What to look for: browsers can cache CSS aggressively. A query string often forces a reload.

Common mistakes and how to fix them

Mistake 1: Wrong file path in `href`

What you might do

HTML

Open in Mimo

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

Why it breaks

A leading / points to the site root. When you open an HTML file locally, that usually does not map to your project folder.

Corrected approach

Use a relative path:

HTML

Open in Mimo

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

Mistake 2: Putting the `<link>` tag in the wrong place

What you might do

HTML

Open in Mimo

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

Why it breaks

Browsers may still load it, but it can cause flashes of unstyled content and confusing behavior.

Corrected approach

Move it into <head>:

HTML

Open in Mimo

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

Troubleshooting

If your CSS changes do not show up, hard refresh the page. Use Ctrl + Shift + R on Windows or Linux, or Cmd + Shift + R on macOS.
If the page is still unstyled, open DevTools, go to Network, refresh, and check if your CSS file returns a 404.
If your stylesheet loads but a rule does not apply, inspect the element and check the Styles panel to see which rule wins.
If styles apply sometimes but not always, remove inline styles and check whether another stylesheet overrides your rule.
If your CSS link works on one page but not another, re-check the relative path from that HTML file’s location.