CSS How To

There are three ways to add CSS to a web page: inline, internal, and external. They all do the same job — they attach rules to your HTML — but they live in different places, and they suit different situations. Real websites use the external way almost all the time. Learn all three, then use the right one.

Diagram — see how it fits together

The three ways

Syntax — all three ways

Inline: the style sits right on the element. It affects only that one element.

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

Internal: the rules sit in a <style> block in the head. They affect the whole page.

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

External: the rules live in a separate file, for example style.css, and the page links to it. One file can style a hundred pages.

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

The cascade — which rule wins?

When two rules disagree about the same element, the browser follows the cascade — a set of tie-breakers, in this order:

1. Inline styles win over internal and external styles.
2. Later rules win over earlier ones, when they are equally strong.
3. More specific selectors win over less specific ones. An id beats a class, a class beats an element. This is called specificity.

So #title { color: red; } beats .heading { color: blue; }, which beats h1 { color: green; } — even if the h1 rule comes last. The browser counts the strength of each selector, not just the order.

!important — the emergency override

There is one thing that beats everything: adding !important after a value.

p { color: red !important; }

This rule wins over inline styles, ids, and everything else. It exists for emergencies — for example, when you must override a style from a library you cannot edit. But use it almost never. Once !important appears in a project, people start adding more of it to beat the first one, and soon nobody can tell which rule wins. A stylesheet full of !important is a sign that the selectors need fixing, not more force.

Common mistakes

• Linking the stylesheet with a wrong path — href="styles.css" when the file is called style.css, or in a different folder.
• Using inline styles everywhere — quick at first, impossible to maintain. One colour change means editing every element by hand.
• Expecting an internal rule to beat an inline style — inline always wins, unless the internal rule uses !important.
• Spraying !important on every rule — it kills the cascade and makes future changes a fight.
• Forgetting that a later rule only wins when specificity is equal — a later element selector still loses to an earlier id selector.

Remember

• Inline = style attribute, internal = <style> in the head, external = <link> to a .css file.
• External is the professional way — one file styles the whole site.
• Cascade order: inline wins, then the more specific selector, then the later rule.
• Specificity: id beats class, class beats element.
• !important beats everything — use it only in a real emergency.

Example explained

• h1 { color: green; } — the internal rule in the <style> block. It styles every h1 on the page green.
• <h1 style="color: blue;"> — the inline style on the first heading. Inline wins over the internal rule, so this heading is blue, not green.
• <h1>Our Courses</h1> — the second heading has no inline style, so the internal rule applies and it is green.
• .note { color: grey; } — a class rule from the same internal block. It styles the paragraph with class="note".
• <!-- <link rel="stylesheet" href="style.css"> --> — the comment shows the external way. In a real site this line (without the comment marks) would load the shared stylesheet instead of the internal block.