How CSS Connects to HTML

CSS does not live inside HTML by default. You have to tell the browser where to find the styles. There are three ways to do this — and one of them is almost always the right choice.

The three methods

1. Inline styles

Inline styles are written directly on an HTML element using the style attribute.

<h1 style="color: green; font-size: 2rem;">Summit Trail Outfitters</h1>

This works, but it is a poor practice for anything beyond quick tests. Every element needs its own style attribute. When you want to change the heading color across 50 pages, you have to change it 50 times. There is no separation between structure and presentation.

Use inline styles: almost never. They are appropriate only for dynamically generated styles from JavaScript.

2. Internal styles

Internal styles live inside a <style> element in the <head> of an HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      h1 {
        color: green;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <h1>Summit Trail Outfitters</h1>
  </body>
</html>

Better than inline styles — all CSS is in one place — but it only applies to that one HTML file. If you have five pages, you need the same styles copied into every <head>. Changes must be made in five places.

Use internal styles: for isolated examples, email templates, or single-file demos.

3. External stylesheets

An external stylesheet is a separate .css file that any number of HTML pages can link to.

project/
├── index.html
├── tours.html
├── about.html
└── styles.css     ← one stylesheet, used by all pages

You link the stylesheet to an HTML file using the <link> element inside <head>:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Summit Trail Outfitters</title>
  <link rel="stylesheet" href="styles.css">
</head>

Now every page that includes this <link> will use the same styles. Change the heading color once in styles.css and it updates on every page instantly.

Use external stylesheets: for every real project. This is the professional standard.

The link element

The <link> element has three attributes that matter:

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

rel="stylesheet" — tells the browser the relationship: this linked file is a stylesheet.
href — the path to the CSS file, relative to the HTML file’s location.
type="text/css" — you may see this in older code. It is no longer required and can be omitted.

The href path works the same way as image src paths:

<!-- styles.css is in the same folder as the HTML file -->
<link rel="stylesheet" href="styles.css">

<!-- styles.css is inside a css/ subfolder -->
<link rel="stylesheet" href="css/styles.css">

<!-- styles.css is one level up -->
<link rel="stylesheet" href="../styles.css">

The order of methods matters

When all three methods are present, inline styles win. Internal styles override external stylesheets. The priority order is:

Inline styles (highest priority)
Internal <style> block
External stylesheet
Browser defaults (lowest priority)

This is why inline styles are dangerous — they can override styles you intended to apply. An external stylesheet that correctly styles h1 will lose to an inline style="color: red" on the element.

Exercise

Set up the stylesheet connection for your Summit Trail Outfitters site:

Create a file called styles.css in the same folder as your HTML files.
Add one CSS rule to confirm it works:

body {
  background-color: #f5f0eb;
}

Add the <link> element to the <head> of index.html:

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

Open index.html in your browser. The background color should change. If it does, the connection is working.
Add the same <link> element to tours.html, about.html, contact.html, and blog-article.html. All pages should now share the same stylesheet.

Recap

Inline styles apply to a single element — avoid them for anything beyond quick tests.
Internal styles apply to a single HTML page — appropriate for isolated demos.
External stylesheets apply to any page that links to them — this is the standard approach.
Link an external stylesheet with <link rel="stylesheet" href="styles.css"> inside <head>.
One stylesheet file connected to all HTML pages means changes made once apply everywhere.