How CSS Works: Syntax & Linking

Write a rule, target an element, see it change. Here is exactly what each piece does.

CSS4 min readConcept 1 of 43

CSS rules: selector, property, value

CSS is a rule-based language. Every rule has two parts: a **selector** that identifies which HTML elements to style, and a **declaration block** (wrapped in { }) containing one or more declarations.

A declaration is a property: value; pair. The property names a style attribute (color, font-size, margin), and the value says what it should be (red, 1rem, 0). The semicolon after each declaration is required; forgetting it is the most common parse error.

Put them together: h2 { color: teal; font-size: 1.5rem; } targets every <h2> on the page and gives it a teal color and 1.5rem size. That is the whole model.

Separation of concerns: style lives apart from structure

HTML describes meaning and content. CSS describes presentation. Keeping them separate means you can restyle an entire site by editing one stylesheet, without touching any HTML.

An external CSS file is downloaded once and cached by the browser for every subsequent page visit. If you inlined styles in every HTML file, the browser would have to re-download the same style data on every page.

The separation also lets you apply the same styles to many elements at once with a single rule, instead of repeating the same style= attribute hundreds of times.

Three ways to attach CSS to HTML

**External** (<link rel="stylesheet" href="styles.css">): a separate .css file linked from <head>. This is the standard approach for any real project. The file is cached, reusable across pages, and easy to maintain.

**Internal** (<style> element inside <head>): styles scoped to a single HTML file. Useful for quick prototypes or email templates where a separate file is not practical.

**Inline** (style="" attribute directly on an element): the highest-specificity option with no reuse. Reserve it for one-off overrides or dynamically computed values from JavaScript.

When styles conflict, inline wins over internal/external. Between internal and external, source order decides: whichever declaration comes later wins (specificity being equal).

Try it

Explore the anatomy of a CSS rule and see how each linking method connects styles to HTML.

Rule anatomy

/* selector */
h2 {
  /* property: value; */
  color: teal;
  font-size: 1.5rem;
}

Rule anatomy

h2Selector: targets every <h2> element
colorProperty: which style to set
tealValue: what to set it to
{ } ;Punctuation: block delimiters + required semicolon
Result: every <h2> on the page turns teal at 1.5rem.

Linking methods

/* 1. External - best for real projects */
<link rel="stylesheet"
     href="styles.css" />
 
/* 2. Internal - one-page prototypes */
<style>
  h2 { color: teal; }
</style>
 
/* 3. Inline - single element, no reuse */
<h2 style="color: teal;">

Three linking methods

ExternalBest

Cached across pages. Edit once, update everywhere.

InternalPage only

Inside <head>. Good for prototypes or single-file pages.

InlineOne element

Highest specificity, zero reuse. Use for dynamic JS overrides.

Source order and the cascade

/* external stylesheet */
p { color: blue; }
 
/* <style> block, placed below <link> */
p { color: red; }
 
/* red wins: later source order */

Source order decides

External: color: blue - declared first
Internal: color: red - declared later

Winner: red

Same specificity, later source order wins. The cascade resolves ties by position.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1In `h2 { color: teal; }`, what is `color` called?
  2. 2Which linking method gives the widest reuse and the best caching across multiple pages?
  3. 3You have both a `<link>` stylesheet and a `<style>` block on the same page, and both target `p { color: blue; }` vs `p { color: red; }`. Which color wins (assuming equal specificity)?

Remember this

  • A CSS rule = selector + { property: value; }. Every declaration ends with a semicolon.
  • External <link> is cacheable and reusable across pages. Prefer it for real projects.
  • Inline style= has the highest specificity but zero reuse. Use sparingly.
  • When specificity is equal, source order decides: the later declaration wins.

Done with this concept?

Mark it complete to track your progress. No login needed.