CSS Tutorial · CSS Basics · Lesson 9 of 19
CSS History & Versions
How Håkon Wium Lie proposed CSS in 1994, why there is no "CSS4", every milestone from CSS1 to today's modular CSS on one timeline, and the modern features (Grid, :has(), container queries, nesting) that changed how we style the web.
How CSS started
Early web pages had no way to describe their look. Authors used tables, spacer images and tags such as <font> to
fake a layout, which mixed content and design. On 10 October 1994, Håkon Wium Lie, working with Tim
Berners-Lee at CERN, proposed Cascading HTML Style Sheets. Bert Bos, who was building a browser with its own
style language, joined him, and together they shaped CSS at the newly founded W3C.
The key idea was the cascade: styles can come from the browser, the user and the author, and clear rules decide which one wins. CSS level 1 became a W3C recommendation in December 1996. Browser support stayed patchy and inconsistent for years; it took until the late 2000s for authors to rely on CSS layouts everywhere.
Timeline of CSS
- Modern CSSCurrent
- CSS is developed as independent modules, each with its own level; browsers ship features one by one
- Recent Baseline features:
:has(), container queries, native nesting, cascade layers, subgrid,oklch()colours, view transitions
- Interop & BaselineCurrent
- Since 2022 browser makers agree each year on features to make work the same everywhere (Interop); since 2023 the Baseline label marks features available in all major browsers
- Grid & custom propertiesPublished
- CSS Grid ships in all major browsers within months, and CSS variables
--brand: tealbecome usable everywhere
- CSS Grid ships in all major browsers within months, and CSS variables
- FlexboxPublished
- The Flexible Box Layout module reaches Candidate Recommendation and becomes the standard way to lay out rows and columns
- Media QueriesPublished
- The foundation of responsive design (
@media (max-width: 600px))
- The foundation of responsive design (
- Selectors Level 3Published
:nth-child(),:not(), attribute selectors; together with Color Level 3 the first finished "CSS3" modules
- CSS 2.1Published
- A corrected, finally finished version of CSS2 that matches what browsers actually implemented
- CSS3 modulesHistoric
- Work on CSS3 starts as separate modules instead of one big specification
- CSS2Historic
- Positioning (
position,z-index), media types, generated content
- Positioning (
- CSS1Historic
- Fonts, colours, text, margins, borders and padding
- ProposalHistoric
- Håkon Wium Lie proposes Cascading HTML Style Sheets
Why there is no "CSS4"
After CSS 2.1, the CSS Working Group split the language into modules: Selectors, Color, Flexbox, Grid, Media Queries and dozens more. Each module evolves at its own pace through levels (Selectors Level 4, Color Level 5, …), and browsers implement features as soon as they are ready. "CSS3" was a useful name for the first wave of modules, but there will never be a single "CSS4" release. The W3C publishes an annual CSS Snapshot listing which modules are stable.
How CSS modernized
- Real layout systems. Floats and tables gave way to Flexbox (one-dimensional) and Grid (two-dimensional), and later subgrid.
- Responsive and component-based design. Media queries (2012) made responsive sites possible; container queries (2023) let a component adapt to the space it gets instead of the whole screen.
- Features that used to need preprocessors. Custom properties replaced Sass variables, and native nesting (2023) removed the main reason many projects used Sass or Less.
- Smarter selectors.
:has()(2023) finally lets you style an element based on what it contains, "the parent selector" developers wanted for 20 years. - Control over the cascade. Cascade layers (
@layer, 2022) let you decide the order in which groups of styles apply, ending specificity battles.
Old CSS vs modern CSS
| Task | The old way | Modern CSS |
|---|---|---|
| Page layout | Floats, clear: both, tables |
display: grid |
| Centering | Negative margins and fixed sizes | display: grid; place-items: center; |
| Reusable values | Sass/Less variables | --brand: #0f766e; with var(--brand) |
| Nesting rules | Sass | Native nesting: .card { & h2 { ... } } |
| Styling a parent by its child | JavaScript | .card:has(img) |
| Component sizes | Media queries on the viewport | @container (min-width: 400px) |
| Browser differences | Vendor prefixes and hacks | Baseline features and @supports |
| Dark mode | Separate stylesheets | prefers-color-scheme and light-dark() |
Recent CSS features and when they became Baseline
| Feature | Baseline since |
|---|---|
Cascade layers @layer |
2022 |
| Container queries | 2023 |
| Subgrid | 2023 |
:has() |
2023 |
| Native nesting | 2023 |
oklch() and color-mix() |
2023 |
text-wrap: balance and light-dark() |
2024 |
@property (typed custom properties) |
2024 |
| View transitions (same page) | 2025 |
Which version should you use?
There is no version to choose: write modern CSS and check each newer feature's Baseline status. Features that
are "Baseline widely available" are safe for almost every visitor; for newer ones, add a simple fallback or wrap them
in @supports.
Official resources
- W3C CSS home page and the CSS Snapshot of stable modules
- CSS Working Group drafts
- MDN CSS reference
- Baseline and Can I use for browser support
- Håkon Wium Lie's original CSS proposal (1994)
Last reviewed 21 October 2026. Release and support dates come from the official release pages linked above.