Applying CSS (inline, internal, external)

There are three ways to attach CSS to an HTML document. Each has a legitimate use case, and each has trade-offs. Understanding the differences helps you make good decisions — and explains why some styles seem to override others unexpectedly.

1. Inline styles

Inline styles are written directly on an HTML element using the style attribute. They apply to that one specific element only.

HTML

<p style="color: red; font-size: 18px;">This paragraph is red.</p>
<p>This paragraph is unaffected — inline styles don't spread.</p>

When to use inline styles:

Dynamic values from JavaScript — when you need to set a style that depends on runtime data, like element.style.transform = translateX(${offset}px)``.
Prototyping or debugging — quickly test a style without touching the stylesheet.
Email HTML — email clients have terrible CSS support; inline styles are often the only reliable option.

Avoid inline styles in regular web pages — they have the highest specificity of all, making them nearly impossible to override with your stylesheet without resorting to !important

An inline style like `style="color: red"` has a specificity that beats every class selector and element selector in your stylesheet. If you later decide the paragraph should be blue, you'll have to either add `!important` to your stylesheet rule or remove the inline style from the HTML. This coupling between structure and presentation is exactly what CSS was designed to avoid. In real projects, inline styles belong only in JavaScript-driven dynamic contexts.

2. Internal (embedded) styles

Internal styles live inside a <style> block in the <head> of your HTML document. They apply to the whole page, but only that page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
    }
    h1 {
      color: navy;
    }
    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Hello</h1>
  <p>Styled by the internal style block above.</p>
</body>
</html>

When to use internal styles:

Single-page projects — a one-off page that will never share styles with other pages.
Email HTML — alongside inline styles, internal style blocks work in most modern email clients.
Quick demos and examples — when you want to share a self-contained snippet.
Critical CSS — sometimes the styles needed for the above-the-fold content are inlined to prevent render-blocking.

3. External stylesheets (the standard approach)

External stylesheets live in a separate .css file, linked from HTML with a <link> element. This is how almost all real websites are built.

HTML

<!-- In the <head> of every HTML page that uses this stylesheet: -->
<link rel="stylesheet" href="styles.css">

<!-- If the CSS file is in a subfolder: -->
<link rel="stylesheet" href="css/styles.css">

<!-- With a full URL (for CDN-hosted stylesheets): -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap">

CSS

/* styles.css — this single file styles every page that links to it */
body {
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  color: #222;
}

h1, h2, h3 {
  color: #1a1a2e;
}

p {
  line-height: 1.7;
}

External stylesheets are cached by the browser — once downloaded, the same file is reused across every page that links to it without another network request

This is one of the major performance advantages of external stylesheets. When a user visits a second page on your site, the browser already has `styles.css` in its cache and applies it instantly with zero network cost. An internal `<style>` block, by contrast, is re-downloaded on every page load since it's embedded in the HTML. For any site with more than one page, external stylesheets win.

Comparison table

Method	Where written	Scope	Reusable?	Best for
Inline	HTML `style` attribute	One element only	No	JS-driven dynamic styles, email HTML
Internal	`<style>` in `<head>`	One HTML page	No	Single-page demos, critical CSS
External	Separate `.css` file	Any page that links to it	Yes	All real projects — this is the default

Linking multiple stylesheets

You can link as many <link> elements as you want. They load in order, and later stylesheets override earlier ones (when specificity is equal). This is commonly used to load a reset or base stylesheet first, then your custom styles on top.

HTML

<head>
  <!-- 1. A CSS reset to level out browser defaults -->
  <link rel="stylesheet" href="reset.css">

  <!-- 2. A design system or component library -->
  <link rel="stylesheet" href="design-tokens.css">

  <!-- 3. Your custom styles, which override anything above -->
  <link rel="stylesheet" href="styles.css">
</head>

The @import rule

CSS also has its own import mechanism: the @import rule lets one stylesheet import another.

CSS

/* styles.css */
@import url('reset.css');
@import url('typography.css');

/* Your custom rules below */
body {
  background: #f5f5f5;
}

@import blocks rendering until the imported file loads — it doesn't download files in parallel like multiple <link> tags do; avoid @import in production stylesheets

When the browser encounters `@import` inside a stylesheet, it has to finish downloading the first file before it can discover and download the imported file. Multiple `<link>` tags in the HTML `<head>` start downloading all stylesheets simultaneously. In modern development, CSS bundlers (Vite, webpack, PostCSS) resolve `@import` at build time into a single file, eliminating the runtime cost entirely — but hand-coding `@import` in a production stylesheet without a bundler is a genuine performance problem.

Understand what the browser does with your CSS once it loads it: [How Browsers Render CSS](/css/browser-rendering).