Who Invented CSS? The Håkon Wium Lie Story

The Pre-CSS Web: Style in the Dark Ages

When Tim Berners-Lee designed HTML in 1990–1991, he deliberately separated content (what a document says) from presentation (how it looks). HTML tags were designed to describe document structure — headings, paragraphs, lists, links — not visual appearance. Fonts, colors, and spacing were intentionally left to the browser's discretion.

This separation was principled but impractical for the growing commercial web of the mid-1990s. Businesses and designers wanted control over how their pages looked — specific fonts, colors, and layouts that reflected brand identity. The W3C's position that appearance was the browser's domain was increasingly untenable as the web became a publishing and commercial medium rather than a scientific document repository.

The market filled the gap in the worst possible way: Netscape Navigator introduced proprietary HTML extensions for visual control — <font> tags for font size and color, <center> for centering, bgcolor attributes on tables and cells. Microsoft Internet Explorer responded with its own proprietary extensions. The result was HTML documents stuffed with presentational markup that made them difficult to maintain and non-interoperable between browsers.

Håkon Wium Lie and the CSS Proposal

Håkon Wium Lie, a Norwegian researcher working at CERN with Tim Berners-Lee and later at the W3C, proposed Cascading Style Sheets in October 1994. The proposal was co-developed with Bert Bos, who had been working on a similar proposal for his Argo browser.

Lie's proposal addressed several problems simultaneously:

• Separation of concerns: Style information should be in style sheets, not in HTML markup — making both cleaner and more maintainable
• Multiple sources: The "cascading" in CSS was a key innovation — styles could come from multiple sources (browser default, user preference, author) and cascade to produce a final value, with a defined priority order
• Inheritance: Style properties should be inherited from parent elements to children, reducing repetition
• Consistent rendering: A standard that all browsers would implement identically, ending the proprietary extension wars

The cascading priority model was particularly significant: it acknowledged that the author (web designer), user (browser preferences, accessibility settings), and browser (default styles) all had legitimate interests in controlling appearance. Rather than giving any one party absolute control, CSS defined a priority order (author > user > browser for most properties) that preserved all three roles.

CSS1: The First Standard (1996)

CSS Level 1 became a W3C Recommendation in December 1996. It covered:

• Font properties: font-family, font-size, font-weight, font-style
• Color and background
• Text properties: text-align, text-indent, text-decoration, letter-spacing, word-spacing
• Box model: margin, padding, border, width, height
• Positioning: position, top, left, float, clear
• The cascade and inheritance model

CSS1 was a well-designed specification. Browser implementation was the problem.

The Browser Wars: Implementation Chaos (1996–2002)

Internet Explorer 3.0 (1996) was the first browser to support CSS, but its implementation was partial and buggy. Netscape Navigator 4.0 (1997) attempted CSS support but implemented it through a JavaScript layer that produced incorrect results and performance problems. Different browsers interpreted the same CSS rules differently — sometimes dramatically so.

The most notorious example was the CSS box model. CSS1 defined the "width" property to mean the width of the content area, with padding and border added outside. Internet Explorer 4–6 implemented a different box model where width included padding and border. The same CSS produced different layouts in IE and in standards-compliant browsers, making web design significantly more complex.

Developers responded with elaborate hacks: conditional comments for IE-specific CSS, JavaScript-based CSS workarounds, and browser detection scripts that served different stylesheets to different browsers. The era is often described as the "CSS dark ages" — the standard existed but couldn't be relied upon.

CSS2 and the Web Standards Movement

CSS Level 2 was published in 1998, adding media types, aural style sheets, z-index and positioning improvements, and generated content. Its most significant additions were the selector model (descendant selectors, pseudo-classes like :hover and :focus) that enabled dynamic visual effects without JavaScript.

The Web Standards Project (WaSP), founded in 1998, campaigned aggressively for browser vendors to implement CSS correctly. The combination of developer advocacy and market pressure from developers who refused to support multiple browser hacks began to shift browser behaviour.

Internet Explorer 6 (2001) was the first version of IE with significantly improved (though still imperfect) CSS support. Mozilla/Firefox (2002–2004) provided a genuinely standards-compliant alternative. Safari (2003) on Mac OS X. Opera had supported CSS well for years. By 2004, CSS was finally usable in practice, not just in theory.

CSS3: The Modular Standard (2011–present)

CSS3 was not a single specification but a collection of modules — each developed, tested, and published separately. This modular approach allowed features to ship as browsers implemented them, rather than requiring all browsers to implement the entire specification before any feature could be reliably used.

Key CSS3 modules and their introduction:

• Border-radius: Rounded corners without image hacks (widely supported 2010–2011)
• Box-shadow and text-shadow: Drop shadows without image hacks
• Gradients: CSS gradients replacing gradient images
• Transforms: 2D and 3D transforms with hardware acceleration
• Transitions and animations: CSS-based animation without JavaScript or Flash
• Flexbox: Flexible box layout (final specification 2012, fully supported 2013–2015)
• Grid: Two-dimensional layout (specification 2017, widespread support 2017–2018)
• Custom properties (CSS variables): Reusable values in CSS (2017)

Units: Where px-to-rem Fits In

CSS's unit system has expanded significantly from the original CSS1 specification. The original units — px, pt, cm, mm, in, em — have been joined by rem, vw, vh, vmin, vmax, and the newer viewport-relative units (dvw, svw, lvw). Each unit reflects a design decision about what should control the scale of an element.

The rise of rem as a preferred unit over px reflects the evolution of CSS design philosophy — from pixel-perfect control toward fluid, accessible, user-respecting layouts. This evolution was made possible by CSS's modular development and the eventual reliable implementation of the specification across all major browsers.

Convert px to rem →