Goal

By the end of this lesson, you’ll understand exactly what job CSS does versus HTML, be able to look at a snippet of CSS and predict what it will visually change, and understand why separating structure from presentation is a deliberate design decision, not just a convention.

Learn

HTML describes what something is: a heading, a paragraph, a button, a list. On its own, a browser renders HTML with plain, generic default styling, regardless of how the content is organized. Open any unstyled HTML page and you’ll see the same thing every time: black serif text, blue underlined links, headings that just get progressively smaller. That’s the browser’s built-in stylesheet, not a design choice anyone made for that specific page.

CSS describes how it should look: colors, spacing, size, layout position, typography, motion. This separation between HTML and CSS is deliberate, and it solves a real problem. Before this separation existed (in the earliest days of the web), developers mixed styling directly into HTML using attributes like <font color="red">. This worked for tiny sites, but it meant that changing a color across a hundred-page site meant editing a hundred pages individually.

With CSS, content and presentation stay independent. The same HTML structure can look completely different depending only on which CSS is attached to it, without changing a single word of content. A news site can restyle its entire visual identity for a redesign without touching a single article’s actual text. This is the entire point: write the content once, restyle it as many times as needed.

A basic CSS rule has two parts, and understanding this structure is foundational to everything else in this course:

selector {
  property: value;
}

The selector says what to style — which HTML elements this rule applies to. The property/value pair says how — which visual aspect to change, and to what. For example:

p {
  color: navy;
}

This rule finds every <p> element on the page and makes its text navy blue. You can include as many property/value pairs as you want inside one rule, each ending with a semicolon:

p {
  color: navy;
  font-size: 16px;
  line-height: 1.6;
}

One more important structural detail: CSS can live in three places — inside a separate .css file linked to your HTML (the standard, recommended approach for any real project), inside a <style> tag in the HTML’s head, or directly on an element using the style attribute. This last option, called inline styling, technically works but defeats much of the purpose of CSS — it re-mixes styling back into your HTML, the exact problem CSS was built to solve. You’ll almost always want the external stylesheet approach for anything beyond a quick test.

Decision Task

Look at these two CSS rules. Before reading further, decide: which one makes all links on the page appear red, and which one only changes the font size of links?

Rule A:
a { color: red; }

Rule B:
a { font-size: 20px; }

Write down A or B for “makes links red” before continuing.

Reveal the Answer

Rule A makes links red — the color property controls text color. Rule B only changes their size, using the font-size property; it says nothing about color at all, so the link would keep whatever color it already had, whether that’s the browser’s default blue or a color set by some other rule.

Common Mistake

Beginners sometimes assume a property name is more flexible than it actually is; for example, expecting color to also control background color, since “color” sounds general. It doesn’t — that’s a separate, specifically named property called background-color. Each property controls exactly one visual aspect, nothing more, and CSS has no single “make this look good” property; you build up the desired appearance from many small, specific properties working together.

Practice Questions

1. Write a CSS rule that makes every <h2> element on a page display in the color purple.

Show Answer

h2 { color: purple; }

2. What’s wrong with this rule, and how would you fix it?

Show Answer

Missing colon between property and value; correct form is color: red;

3. True or False: inline styles (using the style attribute directly on an HTML element) are the recommended way to style a real project.

Show Answer

False — inline styles remix styling back into HTML, defeating the separation CSS is built for; external stylesheets are preferred.

4. A stylesheet contains button { font-size: 18px; }. Will this rule change a button’s background color? Why or why not?

Show Answer

No — font-size only controls text size, not any color property.

5. Explain, in your own words, why separating HTML and CSS made it easier to redesign old websites compared to the days of inline <font> tags.

Show Answer

Because the styling lived in one central place (the stylesheet) instead of being repeated across every page’s HTML, a redesign meant editing the CSS once instead of editing every page individually.

Try It Yourself

Without looking back, write a CSS rule that would make every <h1> on a page appear green.

Show Answer

did you write h1 { color: green; }? If you wrote h1 { background-color: green; } instead, that would color the space behind the text, not the text itself — a genuinely different visual result, worth noticing the difference.

Quick Check

1. What does HTML describe, and what does CSS describe?

Show Answer

HTML describes structure/meaning; CSS describes visual presentation.

2. Which property changes text color: color or text-color?

Show Answer

color (text-color is not a real CSS property).

3. Name the three places CSS can live, and which one is generally recommended.

Show Answer

External stylesheet, internal style tag, inline style attribute — external stylesheet is generally recommended.

4. Without looking back, write a CSS rule that would make every <h1> on a page appear green.

Show Answer

did you write h1 { color: green; }? If you wrote h1 { background-color: green; } instead, that would color the space behind the text, not the text itself — a genuinely different visual result, worth noticing the difference.

5. Look at these two CSS rules. Before reading further, decide: which one makes all links on the page appear red, and which one only changes the font size of links?

Show Answer

Rule A makes links red — the color property controls text color. Rule B only changes their size, using the font-size property; it says nothing about color at all, so the link would keep whatever color it already had, whether that’s the browser’s default blue or a color set by some other rule.