How to Link CSS

CSS can reach your HTML three different ways. Understanding all three — and knowing which one to use — is the first practical skill of every CSS developer.

Method 1 — External Stylesheet (Always Use This)

You write all your CSS in a separate file (e.g. style.css) and connect it to your HTML with a <link> tag inside the <head>. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>
  • rel="stylesheet" — tells the browser this linked file is a stylesheet (not an icon or font).
  • href="style.css" — the path to your CSS file. Can be relative or absolute.
📁 Why external is best

Imagine you have 50 pages on your website. With an external stylesheet, you change one file and all 50 pages update instantly. With internal or inline styles, you'd have to edit every single page. External is the only scalable approach.

Understanding File Paths in href

The href value is a file path — it needs to correctly point from your HTML file to your CSS file. There are two types:

Relative paths — relative to the HTML file's location: 

<!-- CSS file is in the same folder as the HTML file -->
<link rel="stylesheet" href="style.css">

<!-- CSS file is in a subfolder called "css" -->
<link rel="stylesheet" href="css/style.css">

<!-- CSS file is one folder up, then in "assets" -->
<link rel="stylesheet" href="../assets/style.css">

Absolute paths — full URL, used for external resources like Google Fonts: 

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Linking Multiple Stylesheets

You can link more than one CSS file. They stack in order — later files can override earlier ones. 

<link rel="stylesheet" href="reset.css">    <!-- 1. Browser reset -->
<link rel="stylesheet" href="style.css">    <!-- 2. Main styles -->
<link rel="stylesheet" href="theme.css">    <!-- 3. Theme overrides -->

Method 2 — Internal Style Tag

You write CSS directly inside a <style> tag in the <head> of your HTML file. 

<head>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: sans-serif;
    }
    h1 {
      color: navy;
    }
  </style>
</head>

When to use it: Quick prototypes, single-page demos, email templates (which can't load external files), or adding page-specific overrides on top of a global stylesheet.

When NOT to use it: Real multi-page websites. Every page would need its own copy of the CSS — a maintenance nightmare.

Method 3 — Inline Styles

You write CSS directly on an HTML element using the style attribute. 

<p style="color: red; font-size: 18px;">This text is red.</p>
<div style="background: yellow; padding: 10px;">Yellow box</div>

Notice: in the style attribute, you write only the declarations (property: value;), not a selector — the element itself is the selector.

⚠️ Avoid inline styles

Inline styles have the highest specificity (nearly impossible to override without !important), can't be reused, and mix structure with appearance. The only acceptable use is when JavaScript needs to dynamically set a style on an element.

Loading Order and Performance

The browser processes your HTML top to bottom. When it hits a <link> tag, it pauses HTML parsing and downloads the CSS file before continuing. This is called a render-blocking resource.

That's why you should always put <link> tags in the <head>, not at the bottom. If the CSS loads after the HTML renders, users see a flash of unstyled content (FOUC). 

<!-- ✅ Correct — CSS in <head> loads before the page paints -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

<!-- ❌ Wrong — CSS at the bottom causes a flash of unstyled content -->
<body>
  ...content...
  <link rel="stylesheet" href="style.css">
</body>

The media Attribute

You can tell the browser to only load a stylesheet under certain conditions using the media attribute: 

<!-- Only apply when printing -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Only apply on screens wider than 768px -->
<link rel="stylesheet" href="wide.css" media="(min-width: 768px)">
📌 Note

Even with a media attribute, the browser still downloads the file (it just doesn't apply it). For performance, it's usually better to use @media queries inside one stylesheet rather than multiple separate files.

Interview Questions

What are the three ways to apply CSS and which is best?

External stylesheet (best — one file styles many pages), internal style tag (okay for single-page demos), and inline styles (avoid — not reusable, highest specificity). External is the professional standard.

What attributes does the <link> tag need to load a CSS file?

At minimum: rel="stylesheet" (tells the browser the type of resource) and href="path/to/file.css" (the path to the CSS file). Both are required.

What is a render-blocking resource?

A file that the browser must download and process before it can render the page. CSS in the <head> is render-blocking by design — you want the styles loaded before the page paints so users don't see unstyled content.

🏋️ Exercise

Set up a project with this structure:

my-project/
  index.html
  about.html
  css/
    style.css

Link style.css to both HTML files. Add a rule that makes all headings purple. Confirm both pages show purple headings. Then change the colour in one place — both pages update.

Summary

  • The external stylesheet (<link rel="stylesheet" href="...">) is the correct method for all real projects.
  • Put <link> tags in the <head> — never at the bottom of <body>.
  • File paths in href can be relative (to the HTML file) or absolute (full URL).
  • You can link multiple stylesheets — they apply in order, later files override earlier ones.
  • Internal style tags live inside <head> — useful for demos, not for production.
  • Inline styles go on elements directly — highest specificity, avoid except in JavaScript.
  • The media attribute on <link> restricts when a stylesheet is applied.

Related Topics