Arve Bersvendsen

Who created CSS? CSS Early History

The question Who created CSS? just showed up in my search logs. The very short and simple answer to this is:

Håkon Wium Lie and Bert Bos authored the original CSS1 specification.

There is more to this story, however. Bert and Håkon didn’t pull CSS out of any magic hat - this is a small recollection of history of CSS prior to CSS1.

Tim-Berners Lee

According to chapter 20 in Håkon Wium Lie and Bert Bos’ book Cascading Style Sheets, designing for the web Tim Berners-Lee’s original NeXT browser had a simple style sheet language. This style sheet language was what we today would consider user agent stylesheet — which is also why Tim never published the syntax: He felt that how a page was to be displayed was up to the author of the User Agent (read: browser).

WWW-Talk

During 1993, messages started showing up on the WWW-Talk mailing list (the mailing list archive at W3C is missing the years 1993 and 1994) with various proposals for a stylesheet language.

Robert Raisch

On June 10, 1993, Robert Raisch of O’Reilly & Associates posted a proposal named Stylesheets for HTML.

Rob’s proposal did not include any notion of the “Cascade”, but was rather concerned with the ability to style specific elements. Rob’s syntax could look something like this:

@H1 fo(fa=he,si=32,we=bo) ve(be=1,af=2)

Translated into modern-day CSS:

h1 {
  font-family: sans-serif;
  font-size: 32pt;
  font-weight: 900;
  padding-top: 1em;
  padding-bottom: 2em;
}

The reason for using a numeric font-weight in the above example, is that Rob’s proposal used five different font-weights; ultralight, light, medium, demibold, bold.

Rob’s proposal also included a mechanism for including the stylesheet with a document, thus making it what we today know as an author stylesheet

Please note that Rob’s initial proposal, like later proposals from others, did not specify whether the vertical spaces before and after were what we today know as margin or padding, so the examples all assume padding.

Pei Wei

Pei-Yuan Wei, author of the ViolaWWW — famed for being the browser that introduced the concept of applets, three years before the inception of Java — posted his own stylesheet proposal on October 22, 1993.

Pei’s proposal differed wildly from Rob’s, being more verbose, and introducing the concept of inheritance. An example stylesheet:

(HEAD,BODY  fontSize=normal
            BGColor=white
            FGColor=black
    (H1     fontSize=largest
            BGColor=red
            FGColor=white)
    (STRONG  fontWeight=bold)
)

Translated into modern-day CSS:

head, body {
  font-size: medium;
  background-color: white;
  color: black;
}

head h1, body h1 {
  font-size: large;
  background-color: red;
  color: white;
}

head strong, body strong {
  font-weight: bold;
}

Since Pei Wei’s initial proposal was so short, it is somewhat unclear whether his syntax for inheritance corresponds to descendant selectors or child selectors.

Håkon Wium Lie

On October 10, 1994, Håkon Wium Lie released his very first draft of what was to become CSS.

The most important concept introduced in Håkon’s proposal is the cascade — the concept of interaction and prioritization between an author stylesheet, user stylesheet, and finally a User Agent (browser) stylesheet.

Håkon’s original syntax used simple dot-notation:

h1.font.size = 18pt 100%
h1.font.family = times;
h1.space.above = 36pt;
h1.space.below = 8pt;

And, again, translated to modern-day CSS:

h1 {
  font-size: 18pt !important;
  font-family: serif;
  padding-top: 36pt;
  padding-bottom: 8pt;
}

Another concept introduced by Håkon was media-dependent stylesheets:

speech.*.weight = 35db
speech.em.weight = 40db

Joe English

On November 18, 1994 (This date is somewhat uncertain, but taken from the referring document), Joe English posted an alternative proposal, using an SGML-based syntax:

<stylesheet>
  <colors>
    <color id=red rgb="#F00">
  </colors>
  <!-- Highlight all code sections in red: -->
  <style gis = "code kbd pre" fgcolor=red>
  </style>
</stylesheet>

Again, translated to modern-day CSS:

code, kbd, pre {
  color: red;
}

Note that Joe’s proposal uses a concept of defines, which is not directly translateable into CSS. I have used the “red” keyword, since it is defined for CSS.

Also note that while this is the only example shown here that uses a define mechanism, other proposals have used this concept. Notably, the first CSS draft makes use of constants, through the define keyword:

define "My Gray" "191, 191, 191"
P : font.color = "My Gray"

Joe English’ proposal is not available in HTML format, but they are downloadable:

• Joe English: Style Sheets for HTML (PDF Format)
• Joe English: Style Sheets for HTML (PostScript)

Sidetrack: JSSS

Only four months prior to CSS1 becoming a W3C recommendation, Netscape proposed JavaScript-Based Style Sheets — JSSS for short — to the W3C. It’s syntax was, as anybody should guess, a JavaScript-based syntax for embedding styles. JSSS had all the inclusion mechanisms known to CSS:

<style type="text/javascript">
tags.p.font.size = "18pt";
tags.p.color = "green";
</style>

or:

<p style="color = 'green'">Green paragraph</p>

or:

<link
  rel="stylesheet"
  type="text/javascript"
  href="http://example.com/jssss/">
</link>

JSSS was implemented in Netscape 4, and died silently without having had any significant use.

Links and References

• Cascading Style Sheets, designing for the Web — Chapter 20, “The CSS Saga”.
• Wikipedia: Cascading Style Sheets
• Cascading HTML style sheets — a proposal
• Rob Raisch: Request for Comments: STYLESHEETS —www-talk list message
• Pei Wei: Stylesheet Language — www-talk list message
• Cascading Style Sheets, Level 1, Appendix A — acknowledgements from the original revision
• Arena 0.97 — Arena was the first browser with some support for what was later to become CSS.
• JavaScript-Based StyleSheets — JSSS was Netscape’s take on how stylesheets could/should be done.

In addition to these links, the six drafts for the CSS1 specification could be of some interest:

• CSS1 draft 1
• CSS1 draft 2
• CSS1 draft 3
• CSS1 draft 4
• CSS1 draft 5
• CSS1 draft 6

Note that while I use the term “draft”, these documents are not working drafts in the normal W3C sense.

In addition to all the referenced documents, there are some historical links available on the Web Style sheets — but sadly, most of these links are dead. If some of these documents are still on the web, I would appreciate pointers to them. If you have them on file, but have nowhere to host them, you can contact me, so I I can host them here.