6.3Adding CSS to an HTML Document

1. Inline CSS: the style attribute on a single element.

<p style='color: red; font-size: 20px;'>Red text</p>

Use only for quick tests or dynamic values; it cannot be reused and is hard to maintain.

2. Internal CSS: a <style> element in the <head>.

<head>
  <style>
    p { color: green; }
  </style>
</head>

Suitable for a single page.

3. External CSS: a separate .css file linked in the <head>. This is the recommended method.

<link rel='stylesheet' href='css/style.css'>

One file can style every page of the site and the browser caches it.

Priority: inline beats internal and external styles (they are equal, so the later one wins). Keep to one method per project to avoid confusion.