Advanced CSS Styling workshop example

  • Words: Andy Clarke

I’m busy working on the slide deck and example site files for our Advanced CSS Styling workshops in Birmingham, Newcastle (and Tokyo). I’m really excited about this new workshop format and wanted to share one of the example site pages.

For this series of workshops, I'm designing a simple game — an online version of something we have played on long car journeys for years. The game is pretty straightforward, guess what a celebrity died of (they're are only ever four options when you're famous). I can't describe how pleased I am that the incomparable Greg Wood has agreed to illustrate the site.

Advanced CSS Styling

The Advanced CSS Styling workshops focus on how to use the very latest, progressive CSS now, not just on personal projects but on everyday commercial ones too. This is made possible by understanding that browsers will possibly never implement the same CSS at the same time (after all, that's how CSS3 is designed to work). Instead of hacking around browser differences, I will demonstrate how to design around them (that's your job too, right?)

In the latter part of the day, after covering new ways of working with colour, type, images and more, I will be showing how to use CSS transforms and transitions to enhance a page without detriment to browsers that haven't (yet) supported them.

What did for?

This video shows the example shopping page in (first) Safari 4, then (at 35 seconds) Firefox 3.6a. You might first think that these new CSS properties are only useful for a smaller audience of Mac users, but with the army of Webkit-based browsers growing all the time, I'm convinced you'll be seeing a lot more of them over the next year and beyond.

I've constructed the interface from nothing more than an unordered list, each item containing an image, heading and paragraph. I'll write a detailed tutorial another day, but for now it's back to my slides and I hope to see you on one of the day(s).

Contact us


Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Studio address

OpTIC, Ffordd William Morgan,
St. Asaph Business Park,
St. Asaph, Denbighshire, North Wales, LL17 0JD

(Here’s a map showing how to find our studio.)

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ