What is CSS? The Cascade, Explained with One Example

CSS stands for Cascading Style Sheets. It's the language that tells a browser how to display HTML content: colors, fonts, spacing, layout, all of it. The "cascading" part describes how CSS resolves conflicts when more than one rule targets the same element.

This is the written version of my what-is-CSS video, part of my CSS beginners course. It's embedded near the top.

Key Takeaways

• CSS stands for Cascading Style Sheets and controls how HTML content displays, without touching the HTML itself.
• "Cascading" means that when multiple rules could apply to the same element, the more specific rule wins.
• CSS has gone through three major versions: CSS1 (1996), CSS2 (1998), and CSS3 (2005 onward), each backward compatible with the last.
• CSS3 is specifically what makes responsive, mobile-friendly design possible.
• A page with no CSS still displays; it just displays as plain, unstyled HTML.

What "cascading" actually means

Say you have a rule that makes every link green and bold:

a {
  color: green;
  font-weight: bold;
}

Now say you also want links specifically inside paragraphs to be red instead:

p a {
  color: red;
}

Both rules technically apply to a link sitting inside a paragraph. CSS resolves that conflict by favoring the more specific rule: p a targets a narrower case than the bare a, so it wins for color. The bolding rule never gets overridden, so that link ends up red and bold, not one or the other. This is the cascade in miniature: multiple rules, even across multiple stylesheets, all resolving down to one final set of styles per element, based on how specific each rule is. Inline, Internal, and External Style Sheets covers the other half of this same system: what happens when the conflicting rules come from different places entirely, an inline attribute versus a stylesheet, rather than just different selectors.

A brief history

• CSS1 (1996) introduced basic styling: font sizes, colors, background colors.
• CSS2 (1998) added more selector types and let a page define separate styles for screen display versus printing.
• CSS3 (2005 onward) is what most of the modern web runs on, and it's still being actively extended today.

Each version is backward compatible with the one before it. A browser rendering a CSS1-era site today still displays it correctly; it just won't have any of the newer capabilities, like responsive layout, that came later.

Why CSS3 matters specifically

CSS3 is what makes responsive design possible: a layout that rearranges itself for a phone screen instead of just shrinking a desktop layout down. Compare an old, CSS1-era site to a modern one: the old site stays a fixed width no matter how narrow the browser gets. A modern site restructures itself, collapsing a navigation menu into a hamburger icon, stacking columns vertically, adjusting font sizes, all through CSS rules that respond to the available screen size. None of that is a separate technology from what CSS1 introduced; it's the same cascading system, extended with far more capability.

What CSS actually controls

CSS is responsible for effectively everything about how a page looks and rearranges itself: color, typography, spacing, positioning entire sections of a layout, and showing or hiding content based on screen size. HTML defines what the content is; CSS defines how it's presented. A page with no CSS at all still works, it just renders as plain, unstyled text and images in document order, which is a useful way to remember the division of responsibility between the two languages.

Where to go next

Basic CSS Crash Course puts the cascade into practice by building a real styled page from scratch. CSS Colors and Inline, Internal, and External Style Sheets round out the fundamentals this post introduces.

FAQ

What does CSS stand for?

Cascading Style Sheets. It's the language used to control how HTML content is displayed, separate from the HTML that defines the content itself.

What does "cascading" mean in CSS?

It describes how CSS resolves conflicts when multiple rules could apply to the same element: the more specific rule wins, rule by rule, property by property, not as an all-or-nothing choice between two entire rule sets.

What's the difference between CSS1, CSS2, and CSS3?

CSS1 (1996) introduced basic styling like color and font size. CSS2 (1998) added more selectors and separate print styling. CSS3 (2005 onward) is the current standard and is what enables responsive, mobile-friendly design. Each version stays backward compatible with the ones before it.

Does a website need CSS to work?

No. HTML alone renders a functional, readable page; it just displays as plain, unstyled content with no layout control. CSS is what adds visual design and responsive behavior on top of that.

Why do some old websites look broken on my phone?

They likely predate CSS3's responsive design capabilities, or never adopted them. The layout is fixed-width and simply shrinks or gets cut off on a narrow screen instead of rearranging itself.