Three ways to add CSS to a page

Option 1: inline styles

You can put CSS straight onto one element with the style attribute:

<p style="color: crimson; font-weight: bold;">Sale ends tonight!</p>
<p>Regular paragraph.</p>

It works, and you will see it in emails and in code generated by tools. But it has real drawbacks:

• It only affects that one element. Ten warnings means ten copies of the same styles.
• It mixes content and design in the HTML, making both harder to read and change.
• Inline styles beat almost every rule in a stylesheet, so they are hard to override later.

Use inline styles rarely: for a quick test, or for a value that genuinely belongs to one element, such as a width calculated by a script.

Option 2: the style element

You can put rules inside a style element, normally in the head of the page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Style element demo</title>
    <style>
      body { font-family: system-ui, sans-serif; }
      .warning { color: crimson; font-weight: bold; }
    </style>
  </head>
  <body>
    <p class="warning">Sale ends tonight!</p>
    <p class="warning">Only three left in stock.</p>
    <p>Free delivery over Rs. 499.</p>
  </body>
</html>

Now one rule styles every element with the class warning. This is fine for a single-page experiment (most examples in this course use it so you can see everything at once), but the rules only apply to this page. A second page would need its own copy.

Option 3: an external stylesheet (the standard way)

Put your CSS in its own file, for example styles.css, next to your HTML:

my-site/
  index.html
  about.html
  styles.css

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.warning {
  color: crimson;
  font-weight: bold;
}

Then connect it from the head of every page with a link element:

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" href="styles.css">
</head>

A CSS file contains only CSS: no <style> tags and no HTML.

Why this is the default choice for real sites:

• One place to change the design. Edit styles.css and every page updates.
• Faster pages. The browser downloads the file once and reuses it from its cache on every other page.
• Cleaner HTML. Your HTML files describe content; your CSS file describes design.

Linking from a subfolder

The href follows the same path rules as links. From a page inside a blog folder, the stylesheet one level up is:

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

If your styles do not apply, a wrong path is almost always the reason. Open the developer tools (F12), go to the Network tab and refresh: a stylesheet shown in red, with a 404 status, means the browser could not find it at that path.

When several methods are used together

All three can be used at once. Roughly speaking, inline styles win over rules in stylesheets, and among stylesheets and style elements the rule that comes later in the page wins when selectors are equally specific. That is why a link to your own stylesheet should come after any stylesheet from a library you want to override.

Common mistakes

• <style> tags inside a .css file. They are HTML, not CSS, and they break the first rule.
• Using src instead of href on the link element, or leaving out rel="stylesheet".
• A wrong relative path from a page in a subfolder.
• Browser cache. Very occasionally the browser keeps an old copy of your CSS. A hard refresh (Ctrl+Shift+R) loads the latest version.

Exercise

Create index.html and contact.html in one folder, and a styles.css file next to them. Link the stylesheet from both pages. In the CSS, set a font family for the body, a colour for h1 and a class note with a light yellow background (background-color: lightyellow;). Use the note class once on each page and check that both pages share the same look.

body {
  font-family: Georgia, serif;
  line-height: 1.6;
}

h1 {
  color: darkgreen;
}

.note {
  background-color: lightyellow;
}