When CSS was Introduce

The saga of CSS starts in 1994. One of the authors of this book works at CERN – the cradle of the Web – and the Web is starting to be used as a platform for electronic publishing. One crucial part of a publishing platform is missing, however: there is no way to style documents. For example, there is no way to describe a newspaper-like layout in a Web page. Having worked on personalized newspaper presentations at the MIT Media Laboratory, HÃ¥kon saw the need for a style sheet language for the Web.

Style sheets in browsers were not an entirely new idea. The separation of document structure from the document’s layout had been a goal of HTML from its inception in 1990. Tim Berners-Lee wrote his NeXT browser/editor in such a way that he could determine the style with a simple style sheet. However, he didn’t publish the syntax for the style sheets, considering it a matter for each browser to decide how to best display pages to its users. Other browsers, including Pei Wei’s Viola (1992) and the Harmony browser (1993)The Hyper-G system was one of the Web’s early competitors for the Hyper-G system had comparable style languages.

But instead of more advanced style sheets, the browsers that followed offered their users fewer and fewer options to influence the style. In 1993, NCSA Mosaic, the browser which made the Web popular, came out. Stylewise, however, it was a backwards step as it only allowed its users to change certain colors and fonts.

Meanwhile, writers of Web pages were complaining that they didn’t have enough influence over how their pages looked. One of the first questions from an author new to the Web was how to change fonts and colors of elements. HTML at that time did not provide this functionality – and rightfully so. This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:

Learn Simple Animation Through CSS

div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}

/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}