History of CSS: The Evolution of Web Design

Explore the history of CSS. Learn about its origins, Håkon Wium Lie, the browser wars, CSS1, CSS2, and the modern modular CSS3 framework.

Introduction

In the early 1990s, the internet was a digital library of plain academic papers. Tim Berners-Lee invented the World Wide Web and HTML to link documents together, but he deliberately left out styling configurations. As the web grew popular, users demanded visual designs.

Browser companies started inventing custom HTML tags (like <font> and <center>) to color and align elements. This created a massive problem: code became messy, and a site that loaded perfectly on Netscape Navigator would look broken on Microsoft Internet Explorer.

In October 1994, Håkon Wium Lie proposed a solution: Cascading Style Sheets (CSS).

What You Will Learn

  • Why CSS was invented and the problems it solved.
  • The role of Håkon Wium Lie and Bert Bos.
  • The timeline of CSS1, CSS2, and CSS2.1.
  • The shift to modular CSS3.
  • How the "Browser Wars" delayed standardization.

Prerequisites

Detailed Explanation

The history of CSS is a story of standardization prevailing over corporate competition.

chronology
    title Evolution of CSS
    1994 : CSS Proposed by Hakon Wium Lie
    1996 : CSS1 W3C Recommendation
    1998 : CSS2 Released (Absolute positioning)
    2011 : CSS2.1 Standardized (Browser fixes)
    2012 : CSS3 Modules (Transitions, Flexbox)

1. The Origin (1994 - 1996)

Before CSS was standardized, there were over 10 different style proposals. Håkon Wium Lie, working at CERN alongside Tim Berners-Lee, realized that the web needed a styling language where styles could "cascade."

  • The Cascade Concept: A user should be able to define default styles (e.g., "enlarge font size for reading"), which would merge (cascade) with the site designer's styles.
  • In 1995, Bert Bos joined Håkon, and they drafted the first formal specification. In December 1996, the W3C published CSS1.

2. CSS1 (1996) - The Core Features

CSS1 introduced basic styling attributes:

  • Font properties (family, size, bold).
  • Text properties (color, alignment, spacing).
  • Background colors and simple margins/borders.
  • The Problem: No browsers fully supported it. Internet Explorer 3 and Netscape 4 had buggy implementations that crashed when loading CSS.

3. CSS2 and the Browser Wars (1998 - 2004)

In May 1998, W3C released CSS2. It added advanced positioning (absolute, relative, fixed), Z-index overlaps, and media types (styling specifically for printing).

  • The Browser Wars: Microsoft and Netscape were competing for market share. Instead of implementing W3C standards, they built custom tags and proprietary styling behaviors. This forced web developers to write different codebases for different browsers.
  • The Turnaround (CSS2.1): To resolve browser inconsistencies, W3C began drafting CSS2.1, which removed unimplemented CSS2 features and formalized the actual behaviors supported by browsers.

4. CSS3: The Modular Shift (2005 - Present)

W3C realized that updating the entire CSS specification in one giant document was too slow. Under CSS3, they split the language into independent Modules:

  • Selectors Module
  • Box Model Module
  • Flexbox Module
  • Text/Fonts Module
  • Animations/Transitions Module

Each module updates at its own pace. This is why there is no single "CSS4" release; instead, individual modules (like Selectors Level 4) update independently.

Visual Learning Diagram (Mermaid)

graph TD
    A[Early 1990s: Plain Text HTML] --> B[HTML Bloat: font and center tags]
    B --> C{The Choice}
    C -->|Microsoft/Netscape| D[Proprietary Tags: Fragmented Web]
    C -->|Hakon Wium Lie| E[CSS Proposal: Cascade Standards]
    E --> F[W3C CSS1 Recommendation 1996]
    F --> G[Standard Web: Uniform code globally]

Code Examples

Let's look at how CSS syntax evolved to make code clean and reusable.

Before CSS: HTML Tag Bloat (1995)

To color a paragraph red and change its font to Arial, developers had to repeat tags everywhere:

<!-- Messy, unscalable code -->
<p>
  <font face="Arial" color="red"><b>This is red text.</b></font>
</p>
<p>
  <font face="Arial" color="red"><b>This is also red text.</b></font>
</p>

After CSS: Clean Separation (1996)

CSS separated the presentation from the structure, reducing document sizes by over 60%:

<!-- Clean HTML structure -->
<p class="highlight">This is red text.</p>
<p class="highlight">This is also red text.</p>

/* Clean reusable CSS */
.highlight {
  font-family: Arial, sans-serif;
  color: red;
  font-weight: bold;
}

Summary

CSS was proposed by Håkon Wium Lie in 1994 to prevent browsers from fragmenting the web with proprietary styling tags. Moving from CSS1 to CSS2 positioning standards, and finally to modern modular CSS3 systems, the language has evolved to support rich media queries, animations, and flexible layout grids while keeping HTML semantic and clean.

Related Articles

Next Tutorial

How do the different CSS specification versions compile, and what are their features? Let's check: CSS Versions.

← Back to Syllabus