A History of CSS: How the Web Learned to Separate Style from Content
CSS was proposed in 1994 by Håkon Wium Lie at CERN. Follow its path from CSS1 to Flexbox and Grid, and see why clean stylesheets matter for your site.
Every colour, font and layout you see on a web page is controlled by CSS, short for Cascading Style Sheets. It is so basic that it is hard to imagine the web without it, but the first websites had no way to control their appearance at all, and the early attempts to fix this created a mess that took years to clear up.
Early HTML mixed meaning and appearance
Tim Berners-Lee's original HTML described the structure of a document: headings, paragraphs and lists. How these looked was up to the browser, and the reader could usually configure it. Once the web became commercial, designers wanted control. Browser makers added tags such as <font> and <center>, and attributes for colours and sizes, and designers began using tables to lay out entire pages and tiny transparent images to create gaps. The result was slow, inaccessible pages that were difficult to change.
The proposal
In October 1994, Håkon Wium Lie, who worked with Berners-Lee at CERN, published a proposal for cascading style sheets. The name described its key idea: styles from several sources, such as the browser's defaults, the author's style sheet and the reader's preferences, could be combined, with rules to decide which one wins. Bert Bos, who was working on a style-sheet language of his own, joined the effort, and the two developed it together. The World Wide Web Consortium (W3C) took up the work.
The first specification, CSS Level 1, became a W3C Recommendation in December 1996. It covered fonts, colours, margins and text. CSS Level 2 followed in 1998 with positioning, media types and more.
Years of uneven browser support
A specification does not help if browsers do not follow it. Internet Explorer 3 offered partial support in 1996, and Netscape 4 had a rough and incomplete version that was a source of frustration for developers. Internet Explorer 5 for the Mac, released in 2000, was widely praised for its relatively good CSS handling. Even so, different interpretations of the box model in Internet Explorer led to many hacks, and developers had to learn the quirks of each browser.
Proof that it could work
As browsers improved, the web standards movement argued for separating content from presentation: HTML for meaning, CSS for appearance. A well-known demonstration was the CSS Zen Garden, launched by Dave Shea in 2003. It presented a single fixed HTML page which could be given completely different designs by changing only the stylesheet, contributed by designers from around the world. It showed that CSS could produce sophisticated layouts, and encouraged designers to give up table-based design.
Important steps since then
| Period | Development |
|---|---|
| 2000s | Layouts built with floats and positioning; CSS 2.1 clarifies the standard |
| Around 2010 | CSS3 modules gain wide browser support; media queries enable responsive design |
| 2010s | Web fonts, transitions, animations and gradients reduce reliance on images |
| 2012 onward | Flexbox gives a one-dimensional layout system |
| 2017 | CSS Grid reaches major browsers, offering true two-dimensional layout |
| 2020s | Custom properties, container queries and other features reduce the need for preprocessors |
Before Flexbox and Grid, something as common as centring an element vertically was a long-standing joke among developers. Now it takes a line or two.
Why separation matters
- Maintainability. Changing a colour in one file updates the whole site.
- Performance. A stylesheet is downloaded once and cached, rather than repeated in every page.
- Accessibility. Semantic HTML works with screen readers, and CSS can adapt the presentation for different devices.
- Search. Clean markup is easier for search engines to understand.
Practical CSS tips for site owners
- Use a well-maintained theme rather than a heavily patched old one.
- Avoid inline styles scattered through your content, which make changes tedious.
- Remove unused CSS from page builders and plugins, where possible, to cut load time.
- Test your layout at several screen widths, and with larger text sizes.
- Make sure text has enough contrast against its background.
Why the cascade works the way it does
The word cascading explains many of the surprises people meet when styling a page. When several rules apply to the same element, the browser decides which one wins using the origin of the rule, how specific its selector is and the order in which the rules appear. An important rule from the reader's own settings can override the author's, which was meant to protect users who need large text or high contrast. Understanding specificity saves a great deal of time: if a style does not seem to apply, a more specific rule is usually overriding it. Browser developer tools show exactly which rule won and why, and they are the quickest way to debug a layout.
Modern CSS also includes cascade layers, which let large projects control the order of rules explicitly, a feature added many years after the original design but built on the same principle.
The lesson for site owners
CSS exists because the web's founders wanted content that could be adapted to anyone who needed it, and that is still the right design principle. A site built on clean markup and one well-organised stylesheet is faster, easier to maintain and cheaper to change. Stylesheets are static files, so they are ideal for caching and delivery through a CDN, and our WordPress hosting works well with themes that follow these practices.
