Adding CSS to HTML: Inline vs Internal vs External

There are three ways to attach CSS to an HTML page, and the choice matters for maintainability.

1. Inline CSS — written directly on an element via the style attribute:

<p style="color: red; font-weight: bold;">Warning</p>

Applies to one element only. Quick for testing, but hard to maintain at scale and has the highest specificity, making it difficult to override later.

2. Internal CSS — written inside a <style> block in the document's <head>:

<head>
  <style>
    p { color: red; }
    h1 { font-size: 2rem; }
  </style>
</head>

Applies to the whole page. Useful for single-page demos or email templates, but doesn't scale across a multi-page site since styles can't be shared.

3. External CSS — the recommended approach for real projects, written in a separate .css file and linked:

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

/* styles.css */
p {
  color: red;
}

External stylesheets can be shared across every page of a site, cached by the browser (faster repeat visits), and edited in one place instead of scattered across many HTML files.

Cascade order when styles conflict: inline styles beat internal/external styles, and later rules beat earlier ones of equal specificity — but specificity itself (covered in a later chapter) matters more than simple source order in most real conflicts.