What is CSS?

CSS (Cascading Style Sheets) is the language that controls how a web page looks. HTML describes the content of a page — headings, paragraphs, links — but it says almost nothing about color, spacing, fonts, or layout. That's CSS's job.

Without CSS, every page would look like a plain, top-to-bottom stack of black text on a white background (roughly what you'd see with browser default styles). CSS is what turns that raw structure into something with a visual identity.

A CSS rule, piece by piece

p {
  color: #1f2937;
  font-size: 16px;
  line-height: 1.6;
}

This is one rule. p is the selector — it says "apply this to every <p> element." Inside the curly braces is a declaration block, made of one or more declarations. Each declaration is a property (color, font-size, line-height) paired with a value (#1f2937, 16px, 1.6), separated by a colon and ending in a semicolon.

That's the entire grammar of CSS. Everything else in this course is really just: which selectors can you write, and which properties exist.

Why "cascading"?

Multiple rules can target the same element, and sometimes they conflict:

p {
  color: blue;
}

.warning {
  color: red;
}

If a <p class="warning"> matches both rules, which color wins? The "cascade" is the set of tie-breaking rules — based on specificity, source order, and origin (browser styles vs. your styles) — that decides. You'll cover this in detail in the next section, but the short version: more specific selectors and later rules tend to win.

CSS doesn't replace HTML — it styles it

A common beginner mistake is picking HTML elements based on how they look rather than what they mean, because "CSS can fix the look later." That's backwards. Use HTML to describe what something is (a heading, a button, a list), and use CSS to describe how it should appear. Keeping that separation makes pages easier to restyle, easier for screen readers to understand, and easier to maintain as a project grows.

What CSS can and can't do

CSS handles color, typography, spacing, layout (where things sit on the page), borders, backgrounds, transitions, and simple animations. It can't fetch data, respond to clicks with custom logic, or manipulate content — that's JavaScript's territory. Knowing that boundary early saves you from reaching for a <script> tag when a CSS property would do the job (and vice versa).

The rest of this course builds outward from a single rule like the one above to full page layouts with Flexbox and Grid, responsive design, and the custom properties and animations that make modern interfaces feel polished.