Cascading Style Sheets Bringing Sanity Back to Web design

An old saying goes: “There are two types of people: those who divide people into two types and those who don’t.” I am definitely in the former group. For example, I might say there are two types of people: those who read Web pages and those who create them. Of course, some of us do both, but the vast majority of the Web-using public doesn’t know or care about the messy underpinnings of HTML, Web servers, browser compatibility issues, and all the rest. They care about just one thing: the information on the page. If a page loads too slowly, if the fonts are too small, if the graphics overlap the text, or if any of a thousand other things goes wrong, the average Web surfer will simply move along to the next page—there’s nearly always another source for any piece of information, and life is too short to waste it on poorly designed Web sites.

Strangely, this fact seems to be lost on a great many Web developers. I’m surely not alone in having made many purchasing decisions based on the clarity, accessibility, or convenience of a company’s Web site. And when I list URLs for related pages at the bottom of an article on this site, I exclude sites that play music incessantly, that don’t show up correctly in my browser, or that otherwise annoy me. I figure they’ll annoy you too. This is a shame, because the whole point of the Web was to make information available to as many people as possible—and clearly, on some level at least, that goal is still not being achieved.

There are many ways of designing Web pages, but among these are certain widely recognized “best practices.” One such practice is the use of something called Cascading Style Sheets, or CSS for short. If you’re a Web developer, this technology is very old news; if not, your eyes may even now be glazing over as you anticipate a description of meaningless codes and standards that will have no effect on your life at all. I’ll keep this as non-technical as I can; I mainly want to make three points: first, CSS is a wonderful and magical thing; second, any Web site that doesn’t use CSS, should; and third, most sites that do use CSS—including this one—could do a better job. Effective use of CSS improves the Web for everyone—reader and creator alike.

I’m not going to tell you how to make a style sheet or why they “cascade”—there are lots of places to learn that. What I want to tell you is why Cascading Style Sheets are interesting—and why they are so badly needed.

In the Beginning There Was the Page

The first Web pages were mainly concerned with presenting straightforward subject matter to a technically competent audience, not advertising all the world’s books or trying to sell you a car. The people who decided how Web pages should be made—the World Wide Web Consortium, or W3C—designed the original specifications to reflect the needs of early users who worked with simple and highly structured information such as technical papers, outlines, bibliographies, and tables. As the Web became more commercialized, a whole new group of people began creating Web pages. The new Web designers were, on the whole, neither academics nor programmers, but ordinary people who thought Web pages should mimic the layouts found in other media. Unfortunately, the early W3C specifications didn’t provide any way for these new designers to exert the level of control they wanted, so two things happened. On the one hand, companies that made Web browsers started “coloring outside the lines,” so to speak, implementing features that were not part of the official specification. And second, Web designers began to use parts of the specification in ways that were never intended—let’s be bold and call it “cheating”—in order to trick browsers into displaying exactly what they wanted on the screen.

To some extent this cheating worked, but not all browsers performed the same sets of tricks or in the same way—nor did all designers use exactly the same methods of cheating. The result was pages that looked fine in one browser but not another, or on one computer but not another. In order to deal with the chaos, the W3C said fine, let’s update the specification to officially sanction many of the unorthodox cheats. Then at least everyone will be doing the same thing. And so, over the years, the specification went through many revisions, as did browsers, and as did the aesthetic sensibilities of Web designers. Today, on the whole, things are better than they were a few years ago, but there’s still a significant problem. Many Web pages are only friendly to a small group of people—typically, English-speaking people with good eyesight, large monitors, modern browsers, fast computers, and even faster internet connections. And the problem with that is that there are billions of people in the world who aren’t in that group. So if such a Web site provides information, some people can’t read it; if it sells something, there’s an artificial limit on the number of potential customers.

Orthodoxy and Reform

The W3C realized years ago that the specifications for creating Web pages were on a slippery slope, and began taking steps to bring sanity back to Web design. Their first step was to invent a good way for designers to separate the content of a Web site (the text and images) from its form (its layout and visual characteristics). They created two new specifications: one, called XHTML, for the way the content and structure of a site are represented—things like titles, headings, paragraphs, quotations, images, and so on—and a second, known as Cascading Style Sheets, for the way visual elements should appear, including text size, colors, spacing, and layout. And they basically said: “Follow these rules, and there will be joy.” The specifications were cleverly designed such that if Web designers followed them, all the older browsers that didn’t know anything about the newer specifications would still display the pages adequately—not beautifully, sure, but all the content would be readable. (Web pages that do this are said to “degrade gracefully.”)

Read Joe Kissell quality post on CSS