Cave Man

Illustration by Ana Luczynski

Way back in the Pleistocene Epoch, the early cave-dwellers built websites by slicing-and-dicing Photoshop files and dropping all those slices into an html table. We don’t do that anymore. Almost everything designers create in Photoshop (stuff like drop shadows, gradients, glows, etc.) does not get used in the final design; we do that with Cascading Style Sheets (CSS).

CSS determines the visual style for everything you see on a webpage: the typography, layout, colors, some visual enhancements like shadows or gradients, and even animation. Imagine a website with no styling (all black text, blue links and some inline images on a white background); that’s what you would have without the site’s CSS files. You can see it for yourself by disabling CSS styling in your web browser’s settings (most browsers, anyway; I’m not sure about yours). Or check out CSS Zen Garden .  Click on any of the designs to see how the different contributors styled the same web page. But that’s just the beginning. Here are a few reasons CSS is so awesome.

It’s easy to update

Moving on to the late Pliocene Epoch… websites were no longer carved on stone tablets, but the prehistoric designers still did their work the hard way… with inline styling. If Ugg wanted all of his headings to be red, he had to do something like this every time:

Me Ugg. Welcome to Website!

and if he decided he wanted green instead, he had to go back and change each one. We don’t do that anymore! With CSS it’s just one change in the stylesheet and all the headings are updated.

CSS is actually a lot more powerful than just that. The entire look of a website can be changed by switching stylesheets. CSS is the magic behind the visual part of content management systems like WordPress and Drupal. Just choose a different theme for an entirely new look (Building themes is actually a lot more complicated. There’s a ton of html, PHP and Javascript code in there too). However, the biggest difference between most themes is the CSS.

It makes websites faster

There are a lot of things that can make websites slow, but images are almost always the worst offender. For every image, the browser sends an http request to the server, the server sends back the image and the browser draws the image on the screen. All of those things take time and/or bandwidth. Minimizing the number of images and their size is a great start on speeding up a website. Decorative elements like borders, shadows and gradients can all be created with CSS, eliminating extra http requests while using just a tiny fraction of the bandwidth. Things that would have taken time to slowly draw on screen as the images download are instantly there when using CSS.

It’s flexible

When you design something in Photoshop with a fixed width and height, you are expecting the content to fit that space. It’s one of the biggest mistakes I see designers make. When we get the final content from our clients, it’s often longer or shorter than the original concept. Going back to redesign in Photoshop is a waste of time and money. With CSS we can design so that elements will grow or shrink with their content.

It’s responsive, backward-compatible and future-friendly

It’s not the Paleozoic Period any more. We have many new devices with different capabilities and screen sizes from pocketable to huge-mongo-normous. Yet researchers say there are still a few Paleozoic-era computers out in the wild, groaning along with Internet Explorer 6. How do we design for all of them? CSS makes use of media queries, a way of checking the capabilities, screen size and resolution of devices and giving each type of device the appropriate styles. This allows the same website to be served to phones, tablets, desktop computers, televisions and refrigerators with different styles and layouts optimized for each.

Also, with CSS, we can design for the capabilities of modern devices, while preserving backward-compatibility for older browsers (they simply ignore CSS styles they don’t understand). So our fancy new website might have rounded corners and transparent backgrounds, but in IE6 the corners are square and backgrounds are solid colors. Not a big deal; the content is still readable and nothing is broken.

But, in the future, when people browse our website in a virtual-reality 3D space-browser while cruising in their flying cars, they’ll still be able to see everything we designed. And we can still update our media queries to take advantage of the new virtual-reality 3D CSS attributes.*

*These don’t exist yet.