Reflections on the first CSS Stylesheet

This is probably the first CSS stylesheet released to the public, it comes from HÃ¥kon W Lie's initial proposal for CSS in October 1994!

As I look over it in 2017 I notice some interesting things represented here:

• single line comments (all comments here are single-line comments starting with #)
• custom-set cascade (no calculating based on selector specificity)
• pt, mm, and cm units are as old/foundational to CSS as px
• Setting font.size or space.left then using font.size * 2 and space.left + 0.5cm later as values is like a precursor to CSS variables today
• .first seems to be either a pseudo-element like ::first-line or ::first-letter, or a pseudo-class like :first, :first-child or :first-of-type
• x > y ? a : b similar to at-rule logic like @media queries
• REAL_HEIGHT looks like environment values, something brand new in CSS
• separate screen and print media styles

So even as CSS grows over the years, it's still striving to match some of the expressive power intended from the beginning.

#
# This is an initial style sheet. It should provide fallback values
# with low influence. Also, at the end, the user has added some
# favorite settings
#

0%          # 0% impact, i.e. fallbacks

# first, set some common defaults

font.family = times
font.size = 12pt        # alternative units are px, mm, cm
font.slant = normal
font.weight = normal

h1.font.size = font.size * 3
h2.font.size = font.size * 2.5
h3.font.size = font.size * 2

strong.font.weight = bold
em.font.slant = italics
tt.font.spacing = proportional


align.style = left      # paragraph alignment
h1.align.style = center


space.left = 0pt        # set the white space surrounding paragraphs
space.right = 0pt
space.above = 4pt
space.below = 4pt
space.first = space.left + 0.5cm    # i.e. some extra indentation

head.space.above = 15pt         # straying from the 4pt default above

list.space.left = 1cm           # extra indentation for all lists
list.space.first = 1cm

# window-wide settings

AGE > 3d ? window.background = pale_yellow : window.background = white

window.foreground = black

window.width = 400px
window.height = REAL_HEIGHT - 50px

window.margin.left = 2cm
window.margin.right = 2cm
window.margin.above = 2cm
window.margin.below = 2cm

#
# paper works different
#

print.font.size = 10pt

#
# The user has redefined some of the default values below
#

100%    # first, redefine influence to dictatorship

font.family = helvetica

#
# after this, the rest of the influence is handed over to the style
# sheets of the incoming documents
#

Comments

[Ben Halpern]

# This is an initial style sheet. It should provide fallback values
# with low influence. Also, at the end, the user has added some
# favorite settings

Wow, this is really interesting. Do you know if the intention at the time was for it to become such an all-encompassing de facto as it did?

[Ben Halpern]

Hmm I also realize I might be misunderstanding the context here. 🙃