1. Link an external stylesheet (recommended)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Keeping styles in a separate file lets you reuse them across many pages and keeps your HTML clean.

2. Internal styles in a style tag

For a single page, you can put CSS inside a <style> tag in the head.

<head>
  <style>
    h1 { color: navy; }
  </style>
</head>

3. Inline styles on a single element

<h1 style="color: navy;">Hello</h1>

Inline styles affect only that one element. They are fine for a quick test but hard to maintain.

Which method should you use?

  • External file — the default for any real project; reusable and tidy.
  • Internal style tag — fine for a one-off single page.
  • Inline style — only for a quick test or a one-element override.

Frequently asked questions

Why is my CSS file not loading?

Usually the href path is wrong. The path is relative to the HTML file, so check the file name and folder, and make sure the <link> sits inside the <head>.

Do I need a type attribute on the link tag?

No. type="text/css" was required in older HTML but is optional now. rel="stylesheet" and href are all you need.

Want to understand the layout properties behind this? Work through our free HTML & CSS course.