Note, 2005-08-11: Much of this essay, written in 2002 when I had just begun learning about style sheets, is based on misconceptions, as J. King points out. For example, it confuses table- and frame-based layouts; while CSS is a good replacement for the former, it can't substitute for the latter. Misconceptions such as this aside, the fundamental (slightly tongue-in-cheek) objection still holds: every minute spent twiddling your site's appearance is a minute that could have been used improving its content.
Bud, green leaf, gold, bare;
Seasons pass, the tree remains.
So sites with style sheets.
HTML wasn't designed as a page layout language, but over the years presentation elements and attributes crept in. Tags that affect how a document is displayed became mixed with tags that define the document's structure. The <font> tag became ubiquitous, as did the use of tables for page layout. Almost from the beginning, HTML for document presentation was almost inextricably intertwined with HTML for document structure. This led to endemic coding errors, such as the improper use of <hx> tags for their presentation effects rather than their intended use, which is to provide structure to a document.
Cascading Style Sheets are the solution to this confusion. CSS allows you to define the presentation of each element. It goes even further than that; you can define the presentation (or style) of a whole set of elements, or of selected elements. For example, you could define the first paragraph in a document as having a 10% larger font than the following paragraphs. CSS provides a complex set of ways to select elements, and a rich set of properties that can be set for each element.
Like most things in life, though, cascading style sheets have both advantages and disadvantages.
Separates content from presentation. What happens when you want to change the margins on all the pages of your site? If you use tables for layout, then you have to change every page. With CSS, just change the default style of the <body> tag. Instead of changing all pages, you only need to change one style sheet. Using CSS makes site-wide presentation changes a snap. That allows you to spend your time on page content and structure, not presentation.
Replaces frames. A fundamental Web design rule is frames are bad. They can help site navigation, but even in the best case problems remain: pages can't be bookmarked, and it's impossible to specify a set of frames as a link destination. CSS's ability to give elements a fixed or absolute position allow Web designers to do away with frames; the frame is now part of the page itself.
Graceful degradation. A site that uses CSS well will be just as usable on browsers that don't implement CSS as on those that do. The site might not appear the same, but all the important information will be present. This "graceful degradation" was built into CSS by its designers, and is an example of excellent design.
Ah, if only it were all this good.
Fails as a frame replacement. While eliminating frames is a noble idea, it's a goal that has not yet been reached. As of this writing (), CSS is a failure as a replacement for frames, due to broken CSS implementations in recent browsers (Amaya 5.3, Internet Explorer 6.0, K-meleon 0.6, Netscape 6.1, Opera 6.0).
To be specific, try creating an element with a fixed position that includes a link to a named anchor. None of the browsers listed above followed the link & rendered the resulting page correctly; does your browser?
This problem should be remedied in time, but I suspect that CSS fails as a frame replacement for another reason. Consider a site with one navigation frame and one content frame. If I understand CSS correctly, the contents of the navigation frame must be replicated in each of the content pages. That can lead to a maintenance nightmare. The situation can be worse: consider a navigation frame that offers three alternative navigation pages, such as a table of contents, a subject index, and a search page. Must each content page have three different versions, one per navigation page? Yow! The headache of exponential potential!
A great power. Like any design tool, CSS requires practice and experience to use well. It offers great control over presentation; however, the more control a Web designer has over presentation, the more ways that designer has to make ugly and unusable documents. With great power comes great responsibility.
Consider the useful CSS Reference, 3rd edition at the House of Style. This edition is fine, but a previous edition used a style sheet that assigned the same background color to all header elements. This made it hard to distinguish headings from subheadings, since the primary visual cue (background color) made headers appear more similar, not less. (Here's a demonstration of the problem, and a non-CSS version of the same.) This is the kind of problem style sheets were supposed to solve, not exacerbate. If a company that makes its living from CSS could make such a simple CSS mistake, what hope is there for amateur proficiency?
CSS is not designed for horizontal layouts. CSS's page layout model is to fill the page from the top down, flowing additional content off the bottom of the visible page. This vertical bias has its drawbacks. It's not possible to make a multicolumn layout that scrolls new columns in from the side when needed. Also, unusual sites such as Scott McCloud's Daily Improv (a horizontally scrolling comic) have to rely on HTML tricks to achieve their layouts.
Hard to retrofit. It's possible to retrofit a site with CSS, but when you have a site with almost three hundred HTML files containing over eighty thousand elements, visions of CSS become nightmares of editing hell.
Using CSS pays off when it's a part of a site's design from the planning stage on. Retrofitting a site, on the other hand, can involve more than simply peppering pages with class="hot-quote" attributes. Converting a layout to CSS invariably requires adding new HTML elements (usually divs). So we're still mixing semantic and presentation markup, which CSS was intended to separate.
Makes downloading pages harder. If you want to save a copy of a Web page for offline viewing, you'll have to do more work if the page links to style sheets. To get the page as it's presented in your browser, you have to download not only the page's HTML and the style sheets it links to, but also all of the style sheets they import, and so on down the chain of @import statements. Determining style sheet dependencies is a task that, while simple, must currently be done manually.
Wastes time. Time spent twiddling style sheets is time not spent improving site content. How many people go to a site just to look at the pretty design? And what percent of those who do will have a reason to return? Content gives them a reason; design doesn't.
Are cascading style sheets harmful? I can't give a sage answer, since I've only been using them for a week or two, and there are CSS topics I'ven't yet explored (e.g., printing). However, from what I have learned, I'll offer this: CSS in moderation can be a good thing, but extensive use of CSS is harmful. It's easy to improve page readability by modifying nothing more than the margins of the <body> and <p> elements. However, when you find yourself spending an entire day getting a style sheet just right, ask yourself what you could have done with the time instead: Writing new pages? Improving site navigation? Giving people a new reason to visit your site, rather than eye candy? One focuses on design at the expense of content, and CSS gives Web site designers a tempting tool for playing with design ideas. One must remember that search engines index content, not design.
Consider this lesson:
A student went to see his master. As he walked along a riverbank, he flushed a fox from its den. So startled was the student that he lost his footing and fell into the mud. With distaste he picked himself up from the muck and cleaned himself as best he could, then hurried on to his master's house. When the master saw his student, he asked why the student cast his gaze downward. The student related the story of the fox, and apologized that he was no longer presentable. Then you must find a new master, said the wise man, for I do not know how to teach cloth.
Upon hearing these words, the student was enlightened.
Last updated 11 August 2005
http://www.rdrop.com/~half/Creations/Writings/TechNotes/CSS.html
All contents ©2002 Mark L. Irons
Next: Short Notes