Lesson 11 of 32

Introducing CSS

The three ways to attach CSS to a page — inline styles, a style block, and an external stylesheet — and the basic rule syntax every stylesheet is built from.

6 min read

You've been writing HTML that the browser renders with its own default look. Now it's time to control that look on purpose. CSS is a separate language from HTML, but it has to be attached to your HTML somehow before it does anything. There are exactly three ways to do that, and one of them you should almost never use.

Rule syntax first

Every CSS rule has the same shape: a selector, then a block of declarations in curly braces.

p {
  color: navy;
  font-size: 18px;
}

p is the selector — it says "every <p> element on the page". Inside the braces, each line is a declaration: a property (color), a colon, a value (navy), and a semicolon to end it. Forget the semicolon and the next declaration usually still works, because browsers are forgiving about it, but leaving it off is a habit that will eventually bite you when declarations get merged onto one line. Always include it.

Comments use /* ... */, never //:

/* This rule controls every paragraph on the page */
p {
  color: navy;
}

The next lesson covers which elements a selector can target in far more detail. For now, the important thing is the outer shape: selector, braces, property: value; pairs.

Way one: the inline `style` attribute

You can write CSS directly on a single HTML element using the style attribute:

<p style="color: navy; font-size: 18px;">Hello</p>

This works — the browser genuinely applies it — but it's the one to avoid as a general habit, for two concrete reasons:

It can't be reused. If ten paragraphs need the same look, you're copying that same style string onto ten different elements. Change the colour later and you're editing ten places instead of one.
It has the highest specificity of any normal CSS. You'll cover specificity properly next lesson, but the short version: a style written inline overrides almost every rule written anywhere else, including rules written later that were clearly intended to apply. This is a common source of "why isn't my CSS working" — the answer is often "because an inline style is silently winning."

There are a handful of legitimate uses for inline styles — a value computed by JavaScript at runtime, like a progress bar's exact width, is a reasonable one. As a way of styling a page you're hand-writing, it isn't.

Way two: a `<style>` block in the head

You can put a whole block of CSS inside a <style> element, usually in the document's <head>:

<head>
  <style>
    p {
      color: navy;
      font-size: 18px;
    }
  </style>
</head>

This fixes the reuse problem — one rule now applies to every <p> on the page — but it's still stuck inside that one HTML file. A second page needs the same <style> block pasted in again, and if you update one copy, the other quietly drifts out of sync.

<style> blocks are genuinely useful for a single self-contained page, a quick prototype, or (as you'll see throughout this course) a small runnable example. For a real, multi-page site, there's a better option.

Way three: an external stylesheet

Put your CSS in its own .css file, and link to it from the HTML <head>:

<!-- styles.css -->

p {
  color: navy;
  font-size: 18px;
}

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

This is the normal, preferred approach for real sites, for reasons that compound as a site grows:

Reusable across every page. Every page that links styles.css gets the same rules. Change the file once, every page updates.
Cacheable. The browser downloads styles.css once and reuses it for every subsequent page on the same site, instead of re-downloading identical styling with every HTML page.
Separation of concerns. Your HTML file describes structure and content; your CSS file describes appearance. You can hand the CSS file to someone else, or rewrite it entirely, without touching a single tag in the HTML.

href works the same way it does on an <a> tag — a relative path (styles.css, css/main.css) resolves relative to the HTML file that links it.

Which one to reach for

External stylesheet — the default choice for anything real, including every project after this course.
<style> block — fine for a single quick page or a self-contained demo, this course's Playground examples included.
Inline style — avoid as a habit. Reach for it only when a value has to be computed at runtime and can't live in a stylesheet at all.

Try it yourself

The same HTML paragraph is styled three different ways below — one inline, one from a <style> block, one that pretends to link an external sheet (shown inline here only because a Playground can't fetch a separate file). Look at how identical the effect is: this is exactly why reuse and maintainability, not visual power, are what actually separate the three methods.

Try it yourself· Edit the code, then press Run

Loading playground...

What to remember

A CSS rule is a selector followed by { declarations; } — property, colon, value, semicolon.
Inline style="..." works but can't be reused and has the highest specificity of any normal rule — avoid it as a habit.
A <style> block in <head> is fine for one self-contained page.
An external stylesheet linked with <link rel="stylesheet" href="..."> is the normal choice: reusable across pages, cacheable by the browser, and keeps structure and appearance in separate files.