As the saying goes, you don’t know what you’ve got till you’ve gotten shot of the damn thing. To really get what’s cool about modern Web design, you need to know what we had to put up with over its chequered history. So strap in, things are about to get condensed!

Did you ever wonder how Web pages got so attractive? You can remember, I’m sure, when they looked liked amateur Word documents, with the height of excitement being some moving text or a background apparently chosen give you an ice cream headache. Why was that?

Back in them ancient days, styling a website was not impossible. But it was awful. Your typical bit of HTML code would look something like this:

<h1>Your Heading</h1>
<p>Yadda yadda, herp derp etc.</p>

That’s how you’d make a paragraph with a heading above it – it hasn’t really changed to this day. You put words between tags, which tell the browser how to display them. Back then though the browser would use its own default styles – which on most computers meant plain black text, sixteen pixels high for the “p” (paragraph) text and twice that for the “h1” (main heading), in the dreary Times New Roman font. So like this:

Your Heading

Yadda yadda, herp derp etc.

Default styles incidentally are still a thing which you can see – and mess with – in your browser’s settings. Though most sites override them with their own styles there are still some that don’t.

I have an old font which I made from my own hand-lettering, and sometimes I like to pretend I wrote Wikipedia.

So how did you, as a Web author, put in your own styling instead of this awful default stuff? Well, with difficulty. It went pretty much like this:

<h1 style="color:red">Your Heading</h1>
<p style="color:darkslategray">Yadda yadda but in grey now.</p>

You insert some styling information into the tags themselves, which the browser displays like so:

Your Heading

Yadda yadda but in grey now.

OK… Not too hard. Let’s try to change a few more things:

<h1 style="color:red;font-family:Helvetica,Arial;font-size:36px;font-weight:normal">Your Heading</h1>
<p style="color:darkslategray;font-family:Helvetica,Arial;font-size:18px">Yadda yadda only better.</p>

Which renders as:

Your Heading

Yadda yadda only in a nicer font.

Let’s face it, it still looks like utter dogfood. (Must remember to turn off the profanity filter.) It’s nothing compared to the powerful typography used in posters or magazine layouts. And it’s getting complicated fast. What’s worse though, you’ve only styled a single paragraph. Imagine doing that for every paragraph in your page.

Then imagine doing that for every page in your site.

And then imagine the day you wake up to find you no longer like the colour “darkslategray”… Even with multi-document search-and-replace, editing every one of those style instructions across the whole site is depressing just to contemplate.

So Web design was a complete pain in the early years. Tedious, inflexible, highly restricted. And then, along came Cascading Style Sheets (CSS)!

The Revolution

Well actually they’d been there all along, in theory. Håkon Wium Lie had the idea while working with Tim Berners-Lee and Robert Cailliau at CERN right back in 1994. It was always part of the plan for the World Wide Web, but it took considerable time for browsers to catch up with it.

So what does it mean then, Cascading Style Sheets? Well, ‘style sheet’ simply because all the styling that used to be stuck all over the place in tags was now gathered into a single document. So instead of…

<p style="color:darkgray;font-family:'Courier New';font-size:18px">God help us, not again.</p>

…for every single sheeting paragraph, you just write…

p {
    color: darkgray;
    font-family: 'Courier New';
    font-size: 18px;
}

…once and that’s your work done for the whole meter-parking site. YES!

Ahem. And the ‘cascade’ part of the name? That would probably take a whole other article to fully do justice to, but put crudely it means that the specific overrides the general. Styles in the style sheet apply to the entire site, but these can be overruled by styles specifically for one page, which can in turn be overruled by styles right in the tags just like the old-fashioned examples above*. They flow together in a consistent and logical way, allowing you to create a unifying theme for your site as a whole and then tweak that with styling specific to different sections. In Spacelab for example, as shown in our featured image up top there, each page shares the same fonts and colour palette but has its own unique background.

Thanks to the powerful CSS language, all the aesthetics of your site, all the fonts, colours, backgrounds, shapes and sizes – and far more these days, up to and including animations – can and, where possible, should be written in one single document: your style sheet. It’s hard to convey what a huge… relief it was when I first designed this way. Suddenly you could change a whole site at a brushstroke. It was the dawn of a new age of creative freedom.

*There is never^† a very good reason to put styles in the content like that now, but if it wasn’t allowed then older Web pages wouldn’t work any more.

^†Yeah. About a week after I wrote this, I embarked on a project where some styling within the content was just the thing needed. But it was an extremely unusual situation.