Runnable CSS Docs: External CSS

Q: What is external CSS?

External CSS is a stylesheet saved in its own .css file and loaded with in the page's . Every page that links the file gets the same styles, and the browser caches the file between pages.

Q: How do I link a CSS file to HTML?

Add inside . The href is a path relative to the HTML file, so css/styles.css points into a css folder next to it, and /styles.css starts from the site root.

Q: Why is my external CSS not working?

The usual causes are a wrong href path (check the Network tab for a 404), a missing rel="stylesheet", tags written inside the .css file, or a later rule overriding yours. A hard refresh rules out a cached old copy.

External CSS in one line

External CSS is a separate .css file. You link it from the <head> of every page that needs it:

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

The file itself holds plain CSS rules, with no HTML tags around them:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

The preview below has no second file to load, so it puts the same CSS in a <style> element. That is internal CSS, and it renders exactly as the linked file would:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

Internal CSS: the style element

Internal CSS (also called embedded CSS) is a <style> element inside the page. Put it in the <head> so the styles are known before the body renders. It applies to the whole page, and its rules use selectors, which inline style attributes cannot.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Hover a tag: :hover works here because it is a real rule. The third way, the style attribute, is covered on the inline CSS page.

Internal vs external CSS

	External (`<link>`)	Internal (`<style>`)
Where	A `.css` file	Inside the HTML page
Scope	Every page that links it	One page
Caching	Downloaded once, reused across pages	Sent again with every page
Editing a site's look	Change one file	Change every page
Extra request	Yes, one per file	No
Good for	Real websites	Demos, single pages, HTML email, critical CSS

Specificity is the same for both: a rule in a <style> element and the same rule in a linked file weigh exactly the same. When they tie, the one that comes later in the document wins.

Order: the later stylesheet wins

Stylesheets are read in document order, <link> and <style> alike. For two rules with the same specificity, the later one wins. The two <style> blocks below stand in for a linked file followed by a page-level override:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

The button keeps the padding and white text from the first rule and takes only the background from the second. That is why a site's own stylesheet goes after a framework's: <link> the library first, then yours.

File paths in href

The href of a <link> is a URL, resolved against the HTML file's location.

href	Loads
`styles.css`	A file in the same folder as the page
`css/styles.css`	A `css` folder next to the page
`../styles.css`	One folder up
`/styles.css`	From the root of the site
`https://example.com/a.css`	A full URL on another server

For a site whose pages sit at different depths, the root-relative form (/css/styles.css) keeps one path working on every page.

Stylesheets for print and other media

A media attribute limits a stylesheet to matching conditions. Both <link> and <style> accept it:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

The preview is a screen, so the banner shows. On a real page, the banner disappears from the printout, and in DevTools you can see the same by emulating the print media type (Rendering panel).

Common mistakes

Wrong path. A typo in href loads nothing, and the page renders unstyled. Open DevTools, Network tab, and look for a 404 on the .css file.
Forgetting rel="stylesheet". Without it, <link href="styles.css"> does not load a stylesheet.
HTML inside the .css file. A .css file holds rules only. <style> tags inside it are not valid CSS and break the rule next to them.
Putting your stylesheet before the framework's. At equal specificity the later file wins, so link your own CSS last.
Seeing an old version. Browsers cache stylesheets. Hard refresh, or add a version to the URL (styles.css?v=2) when you deploy a change.

Frequently Asked Questions

What is external CSS?

External CSS is a stylesheet saved in its own .css file and loaded with <link rel="stylesheet" href="styles.css"> in the page's <head>. Every page that links the file gets the same styles, and the browser caches the file between pages.

What is internal CSS?

Internal CSS, also called embedded CSS, is CSS written inside a <style> element in the HTML document itself, usually in the <head>. It applies to that page only.

How do I link a CSS file to HTML?

Add <link rel="stylesheet" href="styles.css"> inside <head>. The href is a path relative to the HTML file, so css/styles.css points into a css folder next to it, and /styles.css starts from the site root.

Which is better, internal or external CSS?

External CSS for anything with more than one page: one file to edit, and browsers download it once and reuse it. Internal CSS suits a single page, a demo, or a small block of critical styles you want in the first response.

Why is my external CSS not working?

The usual causes are a wrong href path (check the Network tab for a 404), a missing rel="stylesheet", <style> tags written inside the .css file, or a later rule overriding yours. A hard refresh rules out a cached old copy.

Related concepts