Cascading Style Sheets

Cascading Style Sheets

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 W3 C— 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 W3 C 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 W3 C 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 W3 C 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.”)

Cascading Style Sheets are a bit like the styles you can define in your word processor so that you can change many aspects of a word or paragraph’s appearance all at once, while keeping that appearance consistent throughout your document. When a Web designer uses CSS( and uses it correctly) rather than using the old cheats, several interesting things happen. First, Web pages become viewable on a much wider range of devices, including some very old ones. Second, some very nifty typographical and design tricks that were difficult to achieve before are now a piece of cake. Third, Web pages can be understood much more easily by computer programs— for example, search engines that extract parts of Web pages when they list their results, programs that read Web pages to people who can’t see them, programs that create summaries or perform automatic translation, and programs that determine whether a Web page meets governmental requirements for usability. Fourth— and perhaps most significantly— using CSS means that a designer can dramatically change the appearance and layout of dozens or thousands of pages instantly, simply by modifying a single text file.

And yet, for all these benefits, far too many sites haven’t bothered to implement CSS. Of those that have, many have done so in an unhelpful way that follows the letter of the law but not the spirit of the law— erasing many of the system’s advantages in the process. But only part of the blame falls on the sites’ designers; even the most current Web browsers differ significantly from each other in the way they interpret and display CSS information. Although a designer can use CSS to compensate for bugs or quirks in individual browsers that negatively affect a page’s display, having to do all that fine- tuning harks back to the bad old days of proprietary browser standards. Even so, the mere exercise of separating form from content— and in the process, thinking carefully about the structural elements of a page— is a huge step toward returning the Web to a more useful and accessible state.

Look for the Union Label

Many Web sites— including this one— that make a serious effort to follow the W3 C standards include little badges saying“ XHTML” or“ CSS.” Technically speaking, these indicators may mean little to the average person, but in effect they’re a way of saying, “ We care.” By supporting sites that support these open standards, you show that you care too.