Randal Design

Pure-CSS Website production in the San Francisco Bay Area

What is a CSS, and why would I want one?

Cascading Style Sheets is the result of a constant evolution of Web documents, and an effort to reconcile the storage and retrieval of data with the aesthetic needs of the graphic designer and the consumer. CSS creates stunning pages, which are accessible to users with disabilities, increases the ease of updating both content and display, and improves search engine optimization.

Today, you may think of web documents as just another way to display page layouts and graphics, like PDF. But when the Web began in the early 90's, HTML was intended as a markup language for mostly scientific documents. HyperText Markup Language had nothing to do with display, and everything to do with content. The author of a page would mark-up the portions of the content as paragraphs, lists, data tables and headings, with no layout intended. It was just data to be displayed, probably on a green screen, and the document reader would ultimately be responsible for the presentation.

But eventually, some browsers began to add proprietary tags to their versions, and some of these tags were display-oriented. Enter the Font tag, which allowed the author to specify typefaces, sizes and colors in the presentation. Then graphic designers started to get involved, and soon they learned that you could hack a data table to occupy the whole screen and place the content in separate data cells in order to master a page layout. Tables would be nested inside other tables to a complex degree, sometimes choking the memory constraints of the browsers of the day.

screen shotBy 1996, attractive Web pages had become what we call "tag soup." Far from the original intention of Web documents, more than 60% of the contemporary markup was dedicated to the display of the page, and because the display was included with the content, it meant that a re-styling was impossible without re-writing the whole site. It also meant that the code for the display properties was duplicated in each document; a waste of disk space and bandwidth in the age of the dial-up modem. In another attempt to wrangle the display of an otherwise unruly page, we were inundated with framesets, which often contained bad navigation, while cluttering the page with ugly scroll bars.

Page designers began coding with only the screen presentation in mind. The use of semantic markup tags was waning. Information extraction tools could understand that the <h2> tag means a headline of second importance to an <h1> tag, but how should it interpret a line of text in bold with a color of olive green as compared to an all-caps line of text in burgundy? And how could a search engine extract meaning from a menu button presented as a graphic instead of text? Computers can seldom read pictures.

But also at this time, a project was beginning to surface which had been developing since 1993. The concept was to separate content from style by using a Style Sheet to dictate the presentation of a page. The innovation allowed page designers to create fantastic layouts, and to alter the look of an entire site on-the-fly. Style Sheets also meant that the display information need not be duplicated on each page, but stored in one location on the server. You could dynamically change the display properties of an entire site by altering one document. And Cascading Style Sheets could refer to recursive sets of style definitions for certain cases. But because of limited support of these specs by the browser versions of the time, it would still be a while before this concept caught on.

By 2004, we were starting to see the hype. Though support for features in the CSS specification was still limited by the browsers (notably Explorer), standards organizations were touting the value of CSS as a tool to create page layouts that were not only attractive, but more accessible to people with disabilities, and more importantly, to search engines. Content could be freed from its frames and cells. And the demand for semantic markup ensures that the content is not ambiguous to data extraction applications.

In combination with CSS, the new standard of XHTML demanded cleaner and more consistent code for easier parsing by smaller devices, and allowed for forward compatibility with all future versions of browsers to come. XHTML enables the possibility of creating a document once, and then dictating the presentation for Internet Explorer, Firefox, cell phone screens, printed documents, and even voice applications for call centers. Yes, CSS handles voice styles as well. That's a far cry from the days when developers had to decide if their audience was dominated by Netscape or Explorer.

So by demanding XHTML and CSS, you open the possibility for multiple outputs on a wide variety of media, accessibility for people with disabilities, search engine optimization, and forward compatibility for years to come. Code it once, style it when you want. Future-proof!

Articles

What is CSS?
Why CSS and XHTML are important in the Web today, and always.
So You Want a Website
It's time to seriously assess your needs before planning a site.