Adding CSS to HTML

Before you can style anything, the browser must receive your CSS. There are three ways to include styles in a page — and one clear winner for real projects. This chapter shows each method, the trade-offs, and the production-ready setup.

Method 1: inline styles

An inline style lives in the element's style attribute:

<p style="color: teal; font-weight: 600;">Styled inline.</p>

Expected output: that single paragraph turns teal and semi-bold.

Inline styles have the highest specificity, so they beat almost everything — which sounds handy but is actually a trap: they mix presentation into markup, cannot style pseudo-classes like :hover, and repeat endlessly. Reserve them only for values that truly come from the server (for example a dynamic width from your database).

Method 2: internal stylesheets

A <style> block in the page <head>:

<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #4f46e5; }
    p  { line-height: 1.7; }
  </style>
</head>

This is perfect for a one-page document or critical email-style HTML, but every page that needs the styles must repeat the block.

Method 3: external stylesheets (the winner)

A separate .css file linked from the head:

<head>
  <meta charset="utf-8">
  <title>External CSS</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>

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

a {
  color: #4f46e5;
  text-underline-offset: 3px;
}

Expected output: every page that links this file gets the same typography and link colour — change it once, and the whole site updates.

Why external CSS wins

Best-practice production setup

1. Keep all styles in external files, for example css/base.css, css/components.css.
2. Put the <link> in <head> so styles apply before the body paints — this avoids the "flash of unstyled content".
3. Load the first stylesheet with rel="preload" if you want it even earlier:

   <link rel="preload" href="/css/styles.css" as="style"
         onload="this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="/css/styles.css"></noscript>

4. Combine and minify files before deploying (your build tool does this automatically).

What order do stylesheets apply in?

When several rules are equal, the last one wins. So this:

<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/theme.css">

means theme.css overrides reset.css for equal-specificity rules. Load order is a tool: resets first, then components, then overrides.

Common mistakes

• Relative paths that break — href="styles.css" resolves against the current page URL. On /blog/post it looks for /blog/styles.css. Prefer root-absolute paths like /css/styles.css.
• Blocking fonts/styles in the wrong place — stylesheets in the <body> block rendering; keep them in the head.
• Inline-style every element — it feels fast on page one and becomes unmanageable by page fifty.

Practice checklist

1. Move the example from chapter 1 into an external styles.css and link it.
2. Add a second stylesheet that only overrides the heading colour — confirm order decides the winner.
3. Right-click → Inspect → check the Network tab: the stylesheet loads once and gets cached on reload.

With CSS attached, you are ready to target elements precisely — CSS Selectors Basics is next.