CSS in its Early Days

Necessity of the CSS

The first GUI-based browser didn't support CSS but it was a topic of discussion on www-talk. When finally the CSS1 standard was rolled out in late 1996 by W3C, Microsoft's Internet Explorer v3 added limited support to CSS1 a few months before the W3C release.

As the WWW (World Wide Web) was invented at CERN they value logic, structure and content more highly than aesthetics, imagery and style, but as the web grew it attracted developers that needed control over the appearance of the page.

Before official CSS support for HTML, it introduced quite some attributes and tags for support of styling in HTML2 like <b> (bold), <i> (italics), <cite> (citation), <strike> etc. You can read the official note for HTML2 also known as RFC1866. So the developer can have at least control over the basic styling like font color, style of font.

So how did the developer write before the CSS1 intro? Let's see:

<table bgcolor="lightgray" width="500" height="500" cellpadding="10" cellspacing="0">
  <tr> 
    <td bgcolor="red">Row 1, Column 1</td>
    <td bgcolor="blue">Row 1, Column 2</td>
  </tr>
  <tr>
    <td bgcolor="green">Row 2, Column 1</td>
    <td bgcolor="yellow">Row 2, Column 2</td>
  </tr>
</table>

It looks quite repetitive and hard to maintain. If you know any websites that are live and made before CSS1 do share them in the comment, would love to see and add them here.

The solution to the problem

HTML was designed for providing information, not the layout and styling, so to separate the styling and presentation, Håkon Wium Lie a researcher at CERN (cradle of THE WWW) proposed CSS in late 1994, while there were many proposals of different types of style sheet languages for HTML on the www-talk mailing list, taking inspiration from older Style Sheet Languages like FOSI, DSSSL and P94.

Håkon Wium Lie suggested a Style Sheet Language should have the following components in it:

Syntax: a style sheet language needs syntax to be expressed in a machine-readable manner.
Selectors: selectors specify which elements are to be influenced by the style rule.
Properties: Properties that can be given values to change one aspect of rendering an element. The font size and font weight are typical examples of properties.
Values and units: properties change the rendering of an element by being assigned a certain value. The value can be a string, a keyword, a number, or a number with a unit identifier. Also, values can be lists or expressions involving several of the aforementioned values. A typical value in a visual style sheet is length; for example, 3.1cm which consists of a number (3.1) and a unit (cm). Units can be absolute (e.g. cm) or relative to some other measurement (e.g. em, which is relative to the font size).
Formatting model: Set of rules for formatting the document visually, that is how the elements would style by default. An example would be headings as they would have some spacing and font weight to them for making them distinct.
Linking Mechanism: To take effect, a style sheet must be linked to a document. The linking can be specified in the document, in the style sheet, or by the human user. The linking mechanism is often not part of the style sheet language itself but is still described in style sheet language proposals.

So the development starts with Håkon Wium Lie and Gijsbert (Bert) Bos (joined to co-author CSS1 after its first draft) and gets released in December 1996.

Features & Future Enhancements

CSS1 had listed many features in the release few of them are listed:

Font properties such as typeface and emphasis
Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and lines of text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements
Unique identification (id) and generic classification (class) of groups of attributes

It did have its limitation that needed to be worked upon on the next release:

Limited selectors: Element, Class, Id and Descendant
Lack of media queries: No support for adaptive styling based on device type.
Limited Text Styling: Only a few properties were there for font styling (font-family, font-size, color, text-align, and text-decoration), it didn't support features like using fonts from the web, text-orientation,text-shadow etc.
Inconsistent Browser Support: In the early days of CSS, different web browsers implemented the CSS1 specification differently, leading to cross-browser compatibility issues.
Limited Colors and Backgrounds: CSS1 had a limited set of color and background options compared to later versions, restricting the visual customization of web pages.

And many more. But it was the start of something beautiful.

CSS had been made better with time with CSS2 (1998), CSS2.1 (2011) and CSS3 being released in modules ( few stable and others under development).

Thanks for reading.

Resources for further research:

Ph.D. thesis of Håkon Wium Lie on CSS at the University of Oslo.
Wikipedia of CSS
W3 History of CSS
Timeline of 20 Years of CSS
History of CSS by Boston University Artemis Presentation

The Birth of Web Aesthetics: Exploring CSS's Formative Years