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”:http://people.opera.com/howcome/ and “Bert Bos”:http://www.w3.org/People/Bos/ authored the original “CSS1 specification.”:http://www.w3.org/TR/REC-CSS1-961217.html
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.


h3. Tim-Berners Lee
According to chapter 20 in Håkon Wium Lie and Bert Bos’ book “Cascading Style Sheets, designing for the web”:http://www.w3.org/Style/LieBos2e/history/ 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”:http://www.w3.org/TR/CSS21/cascade.html#cascade — 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).
h3. WWW-Talk
During 1993, messages started showing up on the “WWW-Talk”:http://lists.w3.org/Archives/Public/www-talk/ mailing list (the mailing list archive at W3C is missing the years 1993 and 1994) with various proposals for a stylesheet language.
h3. Robert Raisch
On June 10, 1993, Robert Raisch of O’Reilly & Associates posted a proposal named “Stylesheets for HTML”:http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.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:
bc. @H1 fo(fa=he,si=32,we=bo) ve(be=1,af=2)
Translated into modern-day CSS:
bc. 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”:http://www.w3.org/TR/CSS2/cascade.html#cascade
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.
h3. Pei Wei
“Pei-Yuan Wei”:http://www.xcf.berkeley.edu/~wei/, author of the “ViolaWWW”:http://www.xcf.berkeley.edu/~wei/viola/violaIntro.html — famed for being the browser that introduced the concept of applets, three years before the inception of Java — posted his own “stylesheet proposal”:http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q4.messages/263.html on October 22, 1993.
Pei’s proposal differed wildly from Rob’s, being more verbose, and introducing the concept of inheritance. An example stylesheet:
bc. (HEAD,BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
(STRONG fontWeight=bold)
)
Translated into modern-day CSS:
bc.. 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;
}
p. Since Pei Wei’s initial proposal was so short, it is somewhat unclear whether his syntax for inheritance corresponds to “descendant selectors”:http://www.w3.org/TR/CSS2/selector.html#descendant-selectors or “child selectors”:http://www.w3.org/TR/CSS2/selector.html#child-selectors.
h3. Håkon Wium Lie
On October 10, 1994, Håkon Wium Lie released his “very first draft”:http://www.w3.org/People/howcome/p/cascade.html of what was to become CSS.
The most important concept introduced in Håkon’s proposal is “the cascade”:http://www.w3.org/TR/CSS2/cascade.html#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:
bc. h1.font.size = 18pt 100%
h1.font.family = times;
h1.space.above = 36pt;
h1.space.below = 8pt;
And, again, translated to modern-day CSS:
bc. h1 {
font-size: 18pt !important;
font-family: serif;
padding-top: 36pt;
padding-bottom: 8pt;
}
Another concept introduced by Håkon was media-dependent stylesheets:
bc. speech.*.weight = 35db
speech.em.weight = 40db
h3. 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:
bc. 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”:http://www.w3.org/Style/CSS/draft1.html#constants makes use of constants, through the define keyword:
bc. 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)
h3. Sidetrack: JSSS
Only four months prior to CSS1 becoming a W3C recommendation, Netscape proposed “JavaScript-Based Style Sheets”:http://www.w3.org/Submission/1996/1/WD-jsss-960822.html — 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:
bc.

Green paragraph

or:
bc. JSSS was implemented in Netscape 4, and died silently without having had any significant use.
h3. Links and References
* “Cascading Style Sheets, designing for the Web”:http://www.w3.org/Style/LieBos2e/history/ — Chapter 20, “The CSS Saga”.
* “Wikipedia: Cascading Style Sheets”:http://en.wikipedia.org/wiki/Cascading_Style_Sheets
* “Cascading HTML style sheets — a proposal”:http://www.w3.org/People/howcome/p/cascade.html
* “Rob Raisch: Request for Comments: STYLESHEETS”:http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html –www-talk list message
* “Pei Wei: Stylesheet Language”:http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q4.messages/263.html — www-talk list message
* “Cascading Style Sheets, Level 1, Appendix A”:http://www.w3.org/TR/REC-CSS1-961217.html#acknowledgments — acknowledgements from the original revision
* “Arena 0.97”:http://www.w3.org/Arena/0.97.html — Arena was the first browser with some support for what was later to become CSS.
* “JavaScript-Based StyleSheets”:http://www.w3.org/Submission/1996/1/WD-jsss-960822.html — 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”:http://www.w3.org/Style/CSS/draft1.html
* “CSS1 draft 2”:http://www.w3.org/Style/CSS/draft2.html
* “CSS1 draft 3”:http://www.w3.org/Style/CSS/draft3.html
* “CSS1 draft 4”:http://www.w3.org/Style/CSS/draft4.html
* “CSS1 draft 5”:http://www.w3.org/Style/CSS/draft5.html
* “CSS1 draft 6”:http://www.w3.org/Style/CSS/draft6.html
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”:http://www.w3.org/Style/Welcome.html — 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”:http://virtuelvis.com/help/contact.html me, so I I can host them here.

Next Post

10 Comments

  1. Stian Grytøyr

     /  2005-01-06

    Interesting, I wasn’t aware that a define mechanism was ever proposed. I’ve always thought it strange that CSS doesn’t have such a useful yet simple mechanism. Any idea why it was not included in CSS1 (or later revisions)?

  2. AFAIK JSSS was the reason why disabling Javascript in Netscape 4.x also disabled CSS, since the implementation of CSS was mapped to JSSS, which was actually just Javascript.

  3. Interesting to notice that speech styles were present in this very first draft…
    Thank you very much!

  4. Lasse, your observation is quite correct.
    /me remembers to thank the demigods of the Internet that JSSS disappeared.

  5. Hvem opfandt CSS?

    Jeg faldt lige over en side om selve historien bag CSS. Mange af tingene falder naturligt for en når man har arbejdet med det i noget tid og har læst en bunke bøger på emnet, men …

  6. CSS Reference and History

    Bit of a CSS post this morning 🙂 Just collecting a couple of links together that I don’t want to lose track of.
    For a very comprehensive set of css reference links check out
    Web Design References: Cascading Style Sheets. I’ve used this o…

  7. Very interesting there!
    I too had also wondered about the lack of define (variable support in CSS).
    I have resorted to using PHP to generate the CSS which allows the variables, but wish the define element was available in CSS1 or 2.
    Maybe they’ll add it in CSS3???

  8. http://www.hauntedpalace.net/wordpress/archives/2005/01/11/1252/

    Just making a geeknote for myself, since I always forget the proper order when in the thick of things:
    Remember “TRouBLEd� borders.
    Borders, margins, and padding shorthand assumes a specific order: clockwise from the top, or Top, Right, Bottom, L…

  9. It seems like current CSS syntax is fantastic compared to other proposals.
    Have you seen DSSSL? It looks like a complex programming language…

  10. Please note that you should consider DSSSL as an alternative or precursor to XSLT, and not to CSS.