DocHero
Lesson 3 +10 XP

How to Add CSS

How to Add CSS

There are three ways to add CSS to an HTML page. Think of them as: a spray can, a bucket of paint, and a paint recipe book on a shelf.

1. External CSS: the paint recipe book

A separate .css file, linked with the <link> tag. This is the best way for real websites, one file styles every page.

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

Put the <link> inside <head>. The styles.css file holds all your rules.

2. Internal CSS: paint bucket for one page

A <style> block inside the <head> of one page.

<head>
  <style>
    body { background-color: linen; }
    h1   { color: maroon; }
  </style>
</head>

Only that page gets the style.

3. Inline CSS: spray paint on one element

A style attribute right on the element.

<h1 style="color: blue;">I'm blue!</h1>

Only that ONE heading is blue.

Which is best?

MethodUsed forGood for
ExternalWhole websiteBest, reusable, clean
InternalSingle pageQuick one-off pages
InlineOne elementQuick test/temp tweaks

Real websites use external files. Keep them separate so HTML stays clean and styles can be shared.

When styles conflict

If two rules target the same property, the more specific one wins, and if equal, the later one wins. The cascade handles it. Later lessons explore the full cascade rules!

TL;DR

  • External: <link rel="stylesheet">, best for websites.
  • Internal: a <style> block in <head>, one page.
  • Inline: style="..." on the element.
  • External first, inline is a quick spray only.