When was CSS invented?

CSS was first proposed on October 10, 1994 by Håkon Wium Lie at the first World Wide Web conference in Geneva. Lie was working at CERN with Tim Berners-Lee at the time. Bert Bos later joined and merged his own style sheet proposal with Lie's, and together they brought CSS to the W3C. CSS Level 1 became an official W3C Recommendation on December 17, 1996.

CSS was created by Håkon Wium Lie and Bert Bos. Lie published the original proposal in October 1994, and Bos contributed a parallel proposal for the Argo browser. They merged their work and presented CSS to the W3C, where it became a standard in December 1996. The key idea from Lie's proposal — the cascade — is what gave CSS its name.

What is the difference between CSS1, CSS2, and CSS3?

CSS1 (1996) introduced 68 properties for fonts, colors, margins, and basic text styling. CSS2 (1998) added positioning, z-index, media types, generated content via ::before and ::after, and the cursor property. CSS3 (from 2009 onward) is not a single spec — the W3C split CSS into modules that evolve independently. Modules include Flexbox, Grid, Custom Properties, Transitions, Animations, Selectors, and more. There is no single CSS3 release date; different modules shipped in different browsers across different years.

What were the worst CSS hacks of the IE era?

The most notorious CSS hacks from the Internet Explorer era include: the box model hack (using a CSS parsing bug to feed IE6 a fake width), the star hack (* html .foo {} targets IE6 only because it incorrectly treated * as matching the root element), zoom: 1 (a non-standard IE property used to trigger 'hasLayout' and fix dozens of IE-specific layout bugs), and the clearfix hack (a generated ::after pseudo-element with clear: both to fix collapsed float containers). These hacks appeared in production stylesheets worldwide from roughly 2002 to 2010.

When did CSS Grid ship?

CSS Grid shipped in Chrome 57 and Firefox 52 simultaneously in March 2017. The coordinated release was intentional — browser vendors agreed to ship at the same time to avoid the vendor prefix era repeating. It was the first native 2D layout system in CSS, and it made float-based layout frameworks largely unnecessary overnight.

When did CSS Custom Properties (variables) ship?

CSS Custom Properties shipped in all major browsers in 2017. Unlike Sass variables which are preprocessed away, CSS custom properties are real variables that cascade, inherit, and can be updated at runtime via JavaScript. They use the syntax --my-color: blue and are accessed with var(--my-color).

Modern CSS refers to native CSS features that shipped from 2017 onward and replace techniques that previously required JavaScript, preprocessors, or complex hacks. Key modern CSS features include: CSS Grid (2017) for 2D layout, CSS Custom Properties (2017) for variables, container queries (2023) for component-level responsive design, :has() selector (2023) for parent selection, CSS nesting (2022-2023) for nested rules without preprocessors, oklch() color spaces (2023) for perceptually uniform color, and @layer (2022) for cascade control.

Why did CSS have no proper layout system until 2017?

CSS was designed in 1994 primarily for styling documents, not building application layouts. The first attempt at a dedicated layout module — CSS Grid — was proposed by Microsoft in 2011 and implemented behind a flag in IE10 in 2012. However, the specification changed significantly from the original Microsoft proposal and spent years being refined at the W3C. The coordinated release of CSS Grid in Chrome 57 and Firefox 52 in March 2017, followed by Safari 10.1 the same month, was the first time all major browsers shipped a native 2D layout system simultaneously. Before that, layouts relied on floats (designed for text flow, not page layout), absolute positioning, inline-block hacks, or third-party frameworks like Bootstrap that abstracted over these limitations.

What were CSS vendor prefixes and why did they cause problems?

CSS vendor prefixes (-webkit-, -moz-, -ms-, -o-) were a mechanism for browsers to ship experimental CSS properties before they were standardized. The intent was to allow early adoption without committing to a final API. In practice, they caused significant problems: developers only tested in one browser and only used one prefix, websites broke in other browsers, some mobile sites were written with -webkit- only causing Firefox and IE to render them incorrectly, and Apple's Safari maintained -webkit- prefixes for so long that Chrome, Opera, and even Firefox eventually added -webkit- support themselves to avoid breaking websites. By 2012-2013, the W3C and browser vendors agreed to shift away from prefixes toward feature flags and origin trials instead.

What are CSS container queries and when did they ship?

CSS container queries let you apply styles to an element based on the size of its containing element, rather than the viewport. They solve a fundamental limitation of media queries: a component had no way to know how much space it actually had — only the viewport size. Container queries were first proposed by Ethan Marcotte and others around 2017-2018 as 'element queries'. The first viable specification (size containment) shipped in Chrome 105 in August 2022, Firefox 110 in February 2023, and Safari 16 in October 2022. The feature became Baseline Newly Available in February 2023, meaning it was available in all major browsers. Style container queries (querying custom property values) shipped later in 2023.

1991 → 2026

A History of CSS

30 years of styling the web. The proposals nobody accepted, the hacks everyone used, and the features we waited a decade for.

Eras

30+

Years

40+

Milestones

Dark age hacks

Before CSS (BC) 1991 – 1995

1991 HTML is born. No standard for visual display.

Tim Berners-Lee releases HTML at CERN with the WorldWideWeb browser. This browser already supports style sheets, multiple fonts, and justification. But there is no universal standard. Every browser vendor treats rendering differently. This inconsistency is the exact problem CSS will eventually solve.

Feb 1993 Mosaic ships with inline images.

NCSA Mosaic 1.0 introduces the <img> tag. Tim Berners-Lee actually wanted a different approach for media. Background colors become possible. Styling is still entirely per-browser. No standard exists yet.

1994 The <FONT> tag. The web's first styling tool.

Netscape introduces <FONT face="..." size="..." color="...">. It works. Everyone uses it. It is deeply presentational HTML: structure and style are tangled together. The same tag repeated on every paragraph. Every heading. Every cell in every table. A site with 50 pages means 50 files to update when you change the font.

1994 Tables as layout begins.

Netscape ships <CENTER> and <BLINK> as HTML tags. More importantly, browsers start using <TABLE> for visual layout instead of just tabular data. Transparent 1x1 GIFs stuffed into table cells become a technique for pixel-perfect spacing. This approach will dominate for the next decade.

The Proposal 1994 – 1996

Oct 10, 1994 Håkon Wium Lie proposes CSS.

Origin

Håkon Wium Lie publishes a proposal called "Cascading HTML Style Sheets." The key idea is the cascade: multiple style sheets each contributing rules, with weights to resolve conflicts. Lie is working at CERN with Berners-Lee at the time. This is the document CSS descends from.

1994–1995 Bert Bos joins. The name becomes CSS.

Bert Bos, who had been developing a separate style sheet proposal for the Argo browser, contacts Lie. They merge their ideas. The cascading aspect from Lie's proposal survives. The name "Cascading Style Sheets" is settled on. They bring the work to the W3C.

1995 Netscape proposes JSSS but it dies.

Netscape counters with JavaScript Style Sheets. Styles are written entirely in JavaScript and applied via the DOM. document.tags.P.marginLeft = 12;. The W3C is not enthusiastic. Netscape ships it in Navigator 4. They quietly drop it later. Total market adoption is near zero.

Dec 17, 1996 CSS Level 1 is a W3C Recommendation.

Landmark

CSS1 is published as an official standard. 68 properties. Colors, fonts, margins, padding, borders, text alignment, and basic display values. This version has no layout properties: floats and positioning come later. The spec exists. Now someone has to implement it correctly.

CSS1 (Anno Domini) 1996 – 1998

1996 IE3 ships the first browser CSS support.

Internet Explorer 3 is the first widely used browser to support CSS. The implementation is partial. Dozens of properties are ignored. Some values do surprising things. But it ships, and web developers start experimenting.

1997 Netscape 4 ships CSS support. Also buggy.

Netscape 4 ships with CSS support. It is famously buggy. Simple things like font-size produce wrong results. The short version: web developers learn to write CSS defensively, testing in both browsers and assuming nothing works the same way twice.

1998 IE4 improves CSS compliance. Slightly.

Internet Explorer 4 ships with meaningfully better CSS support. It is not the spec, but it is closer. The box model bug remains. position: absolute works more predictably. The DHTML era begins: JavaScript starts manipulating CSS properties to animate elements.

CSS2 & the Browser Wars 1998 – 2003

May 1998 CSS2 becomes a W3C Recommendation.

Landmark

CSS Level 2 is published. Major additions: the position property, z-index, @media types (including print), the content property for generated content, cursor, and the :before and :after pseudo-elements. CSS now has a proper layout model on paper. In browsers, support is still fragmented.

1998–2001 The browser wars. Write everything twice.

IE and Netscape implement CSS differently enough that the same stylesheet produces different results in each browser. Web developers respond by writing browser-specific rules, using JavaScript to detect the browser, or simply giving up on CSS and staying with tables. "Best viewed in Internet Explorer 4.0" banners proliferate.

2000 IE5 for Mac ships the most accurate CSS renderer of its era.

Tasman, the rendering engine in Internet Explorer 5 for Mac, passes the CSS1 test suite better than any browser of its time. It gets the box model right. Developers who test on it are briefly optimistic. Then IE6 for Windows ships, and optimism evaporates.

2001 IE6 ships and dominates for nine years.

Inflection point

Internet Explorer 6 achieves near-total market dominance. It inherits a non-standard box model from IE5 for Windows. width includes padding and border instead of only the content area. It has dozens of layout bugs. It does not update for 5 years. This version shapes every CSS technique for the next decade.

The Dark Ages 2001 – 2010

~2002 The box model hack.

CSS Horror

IE6's wrong box model means width calculations are off everywhere. The fix: use a CSS parsing bug. Writing voice-family: "\"}\""; voice-family: inherit; confuses IE into stopping early, so you can feed the wrong-box-model IE a faked-up width and all other browsers the real one. This is what production CSS looks like in 2002.

~2003 The star hack.

CSS Horror

The star hack (* html .selector) confuses IE6 into applying a rule it should ignore. It becomes the standard way to write IE-only overrides. CSS files develop a two-column structure: the real rule, then the starred override underneath.

~2003 zoom: 1. Not a real property. Works anyway.

CSS Horror

IE has a concept called "hasLayout": an internal flag that controls whether an element manages its own size and position. Many IE bugs only affect elements without layout. The fix is triggering hasLayout by applying zoom: 1. This is a non-standard IE-only property that does nothing visible but flips the internal flag. It appears in every serious IE-compatible stylesheet.

~2004 The clearfix solves collapsing containers.

CSS Horror

Floats are the main layout tools of this era. Sidebar left, content right. But floated elements are removed from the normal flow. Their parent collapses to zero height. The fix is a generated ::after pseudo-element. It uses content: ''; display: table; clear: both; on every layout container. This gets copy-pasted into every stylesheet for 15 years.

2004 Firefox 1.0 ships. Real CSS2 support.

Firefox 1.0 launches as the alternative to IE6. Its rendering is faster and its box model is correct. Developers who use it feel what CSS was supposed to be. IE still has 90%+ market share, but things are starting to shift.

2005–2006 CSS2.1 drafts. Vendor prefixes begin.

The W3C starts CSS2.1, a corrected version of CSS2 that reflects what browsers actually implemented. Browser vendors start using vendor prefixes like -webkit-, -moz-, and -o-. Every new feature needs four lines. Some features end up prefixed for seven years.

2008 Safari ships -webkit-border-radius. Rounded corners.

Before this, rounded corners required 3-4 images, extra markup, and nested divs. Safari 3 ships -webkit-border-radius, and developers use it the same day. Firefox follows with -moz-border-radius. IE users see square corners for another three years. Designers start asking for rounded corners constantly.

CSS3 Renaissance 2009 – 2016

2009 CSS3 goes modular. No more monolithic spec.

The W3C splits CSS into separate modules: Selectors, Colors, Backgrounds, Transforms, Transitions, Animations, Flexbox, and Grid. Each can advance at its own pace. This is why there is no single "CSS3 release date." Different modules ship in different browsers across different years. CSS development is now continuous, not version-based.

2009–2010 Transitions and transforms ship. Animations without JavaScript.

CSS Transitions (-webkit-transition) and CSS Transforms (-webkit-transform: rotate(45deg)) arrive first in Safari, then Firefox. For the first time, you can animate a property by changing its value — the browser interpolates the intermediate frames. JavaScript animators start losing their jobs to a single line of CSS.

2011 CSS2.1 becomes a W3C Recommendation. 13 years after CSS2.

CSS2.1 finally becomes a W3C Recommendation 13 years after its predecessor. This is the same year IE9 ships — the first IE version with serious CSS3 support including SVG, border-radius, and CSS3 selectors.

2012 Flexbox lands with the modern syntax.

Chrome 21 ships with display: flex. This is the third and final version of the Flexbox syntax. It replaces the experimental display: box from 2009. Vertical centering becomes possible with one line of CSS. Clearing floats slowly stops being the main topic of layout discussion.

2013 @keyframes and CSS Animations ship.

CSS Animations add @keyframes, animation-duration, animation-timing-function, animation-iteration-count. Complex multi-step animations without a single line of JavaScript. jQuery's .animate() function starts looking obsolete. Vendors still require prefixes: @-webkit-keyframes, @-moz-keyframes.

2015 Flexbox unprefixed and stable across all major browsers.

Flexbox is finally stable across all major browsers. Floats — the layout tool of every major CSS framework — are gradually replaced. Bootstrap 4 will eventually drop its float-based grid for Flexbox in 2018.

2016 IE6 end of life. 9 years after IE7 shipped.

IE6 finally reaches end of life. This browser version had slowed down progress for a decade. Its death is celebrated by web developers worldwide. Some buy champagne. Some make t-shirts. Some do both.

Modern CSS 2017 – present

Mar 2017 CSS Grid ships in Chrome and Firefox simultaneously.

Landmark

display: grid — 3 columns, 2 rows

Chrome 57 and Firefox 52 ship CSS Grid on the same day. This coordinated release avoids the vendor prefix era. Two-dimensional layout is finally native to CSS. Rules and columns are defined in the stylesheet. Items are placed by grid area name. Float-based layout frameworks become unnecessary overnight.

2017 CSS Custom Properties ship everywhere.

Landmark

Click to change --color

CSS custom properties, --my-color: blue; and color: var(--my-color);, ship in all major browsers. They are real variables that cascade, inherit, and can be updated at runtime. Sass preprocessors lose their main selling point. Theming with JavaScript becomes possible without inline styles: change one custom property on :root and every element that uses it updates.

2021 clamp() widely available. Fluid sizing without media queries.

font-size: clamp(0.85rem, 2.5vw, 1.4rem)

Resize the window to see this scale.

min 0.85rem → fluid 2.5vw → max 1.4rem

clamp(min, preferred, max) picks a value within bounds. font-size: clamp(1rem, 2.5vw, 2rem) produces fluid typography that scales with the viewport but never goes below 1rem or above 2rem. No media queries. No JavaScript. The technique that had required a full fluid typography library fits in one property value.

2022 CSS @layer ships. The cascade gets explicit order control.

@layer lets you group rules into named layers and declare their priority order: @layer base, components, utilities;. Utilities always win over components, regardless of specificity. The !important wars — where teams escalate specificity to override each other's styles — have a structural solution. Third-party library styles can be put in a low-priority layer and overridden cleanly.

2022–2023 CSS Nesting lands. Write CSS inside CSS.

Native CSS nesting ships in Chrome 112, Firefox 117, and Safari 16.5. You can write .card { color: red; &:hover { color: blue; } } without a preprocessor. Sass users shrug. PostCSS-nesting maintainers update their READMEs. The main argument for using Sass in 2024 is mostly habit.

2023 Container Queries. The most requested feature for 10 years.

Landmark

Container Queries ship in all major browsers. Style an element based on the size of its container, not the viewport. A card component that reflows its layout when placed in a narrow sidebar without needing to know anything about the page it's in. Developers had been asking for this since media queries were introduced. It took a decade.

2023 :has() ships. The parent selector finally.

:has(input:checked) changes the parent

Pure CSS. No JavaScript.
Parent styles child state.
Check to see :has() work.

:has() matches an element if it contains a matching descendant. Examples include form:has(:invalid) and li:has(input:checked). CSS developers wanted a parent selector since the 1990s. It took 30 years because of performance concerns. Browsers must recalculate styles when a descendant changes. This requires solving difficult invalidation problems. Chrome 105, Safari 15.4, and Firefox 121 now support it.

2023 oklch() and the new color spaces.

oklch(), display-p3, lab(), lch() and other wide-gamut color spaces ship in all major browsers. OKLCH's L (lightness), C (chroma), H (hue) axes are perceptually uniform: adjusting L actually changes perceived brightness, not just a mathematical value. You can build a design system palette by locking H and C and varying L. The result is visually consistent where HSL is not.

2024 @starting-style. Entry animations without JavaScript.

@starting-style defines the style an element should transition from when it first appears in the DOM. Before this, entry animations required JavaScript to add a class after insertion. Now: @starting-style { opacity: 0; } triggers a CSS transition on the element's first render. Useful for dialogs, tooltips, and anything that appears dynamically.

2025 CSS if(). Inline conditionals in CSS values.

CSS if() allows conditional values inline: color: if(style(--variant: danger): red; else: blue). It brings branching logic into CSS values without needing separate classes or multiple rules. Combined with custom properties, it means a component can express its own variant logic in CSS. Currently shipping in Chrome Canary and behind flags. Baseline status: limited.

A History of CSS

New CSS drops.