Adding CSS to a Page

Master all the ways CSS gets attached to HTML — inline, internal, external, and @import — and know which to use (and avoid) in real projects.

In the first lesson you got a preview of the three ways to add CSS. Now let's go deeper: the exact syntax for each, a fourth method called @import, and — critically — the reasoning professional developers use to choose external stylesheets as the default, reserving inline and internal styles for narrow special cases.

Inline CSS

Inline CSS is written directly on an HTML element using the style attribute. It applies only to that one element and has no separate selector — the element itself is the target.

Inline styles have the highest specificity of the three main methods (they override internal and external rules for the same property on the same element, short of !important), which is exactly why they're risky: they're hard to override, hard to search for across a codebase, and can't be cached or reused.

Internal CSS

Internal CSS lives inside a <style> element, typically placed in the <head> of the document. It applies to the whole document it's written in, using normal selectors. It's useful for single-page demos, quick prototypes, or email templates (where external stylesheets are often unreliable), but for multi-page sites it means duplicating the same styles in every page's <style> block — a maintenance headache.

External CSS

External CSS lives in a separate .css file and is linked into the HTML document with a <link> tag inside <head>. This is the industry-standard approach for real websites. One .css file can be linked from an unlimited number of HTML pages, giving you a single source of truth for your site's look, and the browser caches the file after first download so repeat visits (and navigation between pages) load faster.

@import — and why to avoid it in production

CSS also has an @import rule, which lets one stylesheet pull in another, written at the top of a CSS file: @import url("other.css");. It can also be used inside a <style> block. While convenient for organizing styles during development, @import has a real performance cost: imported stylesheets can block rendering and, depending on how they're chained, may not be downloaded in parallel with the main stylesheet the way multiple <link> tags are. For production sites, it's generally recommended to use multiple <link> tags, or better, to bundle/combine your CSS files with a build tool, rather than chaining @import calls.

Recommended practice

Default to external stylesheets linked with <link>. Use internal <style> blocks sparingly (quick demos, single HTML files, certain email templates). Reserve inline styles for cases where CSS is generated dynamically by JavaScript at runtime (e.g., setting a computed width), and avoid @import for production performance-critical stylesheets.

All four methods

@import must appear before any other rules in a stylesheet (aside from @charset). <link> supports the media attribute for conditional loading, e.g. media="print".

<!-- Inline -->
<p style="color: red;">Text</p>

<!-- Internal -->
<head>
  <style>
    p { color: red; }
  </style>
</head>

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

/* @import — inside a CSS file, at the very top */
@import url("base.css");
p { color: red; }

Code Examples

A one-off inline style — reasonable for a single, unique tweak, but not something you'd want to repeat across dozens of links.

Internal CSS defines a reusable .highlight class for this document, good for a self-contained demo or single-page tool.

Both pages share the same main.css file. Update one file and both pages' styling updates instantly — this is the payoff of external CSS at scale. Because the browser caches main.css after the first page load, navigating from about.html to contact.html doesn't require re-downloading the stylesheet.

<a href="#" style="color: orange; text-decoration: none;">Link</a>

<head>
  <style>
    body { margin: 0; font-family: sans-serif; }
    .highlight { background-color: yellow; }
  </style>
</head>
<body>
  <p class="highlight">Important note</p>
</body>

<!-- about.html -->
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>

<!-- contact.html -->
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>

Performance in practice

Sites that care about load speed (which is virtually all production sites, since it affects SEO and user retention) use a small number of external, well-organized, and often minified CSS files, avoid @import chains, and keep inline styles to cases handled by JavaScript at runtime.

<style> @import url("colors.css"); </style> <p style="color: blue;">Overridden anyway</p>

<link rel="stylesheet" href="colors.css"> <p class="highlight-text">Styled via class</p>

Chaining @import adds an extra network round-trip before the imported styles even begin downloading, and an inline style will override anything colors.css defines for that paragraph anyway — defeating the point of centralizing styles.

[True / False] Using @import inside a CSS file to pull in other stylesheets is generally the recommended approach for production websites that care about page load performance. A. True B. False

B. False — False. @import can block rendering and add extra request round-trips; production sites typically prefer multiple <link> tags or bundled/combined CSS files instead.

You're building a 5-page marketing website that needs consistent styling across all pages. Which CSS method should you use, and why?

External CSS via <link rel="stylesheet" href="styles.css">, linked identically in all 5 pages — one source of truth, cached after first load, easy to maintain.

Think about maintainability and caching across multiple pages.