CSS How To

Three ways to add CSS — inline, internal, external — and which is best.

Definition

Method	How	Best for
External	`<link rel="stylesheet" href="main.css">`	Production — cacheable
Internal	`<style>` in `<head>`	Single-page demos
Inline	`style="color:red"`	Quick tweaks, JS-set runtime

Three Ways to Attach CSS

html
<!DOCTYPE html>
<html>
<head>
  <!-- External -->
  <link rel="stylesheet" href="main.css">

  <!-- Internal -->
  <style>
    body { font-family: sans-serif; }
    h1   { color: orange; }
  </style>
</head>
<body>
  <!-- Inline -->
  <h1 style="font-size: 48px">Hi!</h1>
</body>
</html>

Specificity Order (overrides)

inline > internal/external > id > class > tag > universal.

Critical CSS Pattern

Inline above-fold styles in <head>, then async-load the rest:

html
<style>/* critical hero CSS */</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">

Common Mistakes

<style> in <body> — works but causes Flash Of Unstyled Content.
Inline everything — un-cacheable, hard to maintain.
Multiple <link> — each adds an HTTP request.

Interview Questions

Practice Exercises

External — Move all CSS to main.css. Hint: relative path.
Critical — Inline 5 lines of hero styles in <head>. Hint: above the fold.
Specificity test — Combine inline + class + id, see which wins. Hint: inline.