CSS How To — Three Ways to Add CSS

There are three ways to attach CSS to HTML. In real projects you'll use external stylesheets almost exclusively, but it helps to know all three.

1. External stylesheet (recommended)

A separate .css file linked from every page that needs it — one file, reused everywhere, cached by the browser.

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

2. Internal stylesheet

CSS written inside a <style> tag in the document's <head>. Useful for a single page that needs its own styles, or quick experiments.

<head>
  <style>
    body { background-color: #f4f4f5; }
    h1 { color: #4f46e5; }
  </style>
</head>

3. Inline styles

CSS written directly on an element via the style attribute. Highest priority in the cascade, but hardest to maintain — avoid it for anything beyond a one-off tweak or dynamically-generated styles.

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

Cascade order

When the same property is set in more than one place, the browser picks a winner using, in order: importance (!important), then specificity (see the Specificity chapter), then source order (later rules win ties). Inline styles beat both internal and external stylesheets unless a stylesheet rule uses !important.