Eric Meyer

on CSS

cover image
Available now!

Converting an Existing Design

Project 1

preview image 1 preview image 2 preview image 3
Project files
Project 01 ZIP file Project 01 StuffIt file

Psychology teaches us that any major trauma or unwelcome, life-changing event typically evokes four stages: denial, anger, bargaining, and acceptance. For many Web authors, such an event was the news that HTML was dropping elements like <b> and <font> and that, to make pages look good in the future, a new skill would have to be acquired: cascading style sheets (CSS).

After the refusal to believe that such useful tags could be eliminated, there is usually rage directed at the W3C ("stupid, fuzzy-headed, ivory-tower academics!") and then the silent vow to use fewer font tags in the future. What I hope to do in this book is hasten acceptance and show why this transition is actually cause for celebration, not sorrow. Join us and be free and happy!

In this project, we take a page whose presentation is based entirely in HTML tables and font elements, strip it down to the basic markup needed to lay out the page, and then build the presentation back up using CSS. The end result, while being almost totally indistinguishable from the original file, is 35% smaller and much simpler, which can mean faster layout times in browsers.

Errata

Page 9

In the last code block on the page, the keywords left top should actually read top left. This does not affect the way the rule is handled, but it is inconsistent with the rest of the chapter.

Page 11

In the second code block on the page, the fourth line should read:

<td colspan="2">

The id="crumbs" should not appear in the second code block, as it is added in the next code block on the page.

Page 17

The first two lines of the second code block on the page should read:

<td id="content">
<h1>Ragged Point Inn</h1>

The markup in the project files is correct.

Page 18

The sentence immediately following the first code block should read: "We still have to re-create the thick line underneath the text."

Page 28

The blue declaration in the first code block should be red. The line was printed using the wrong color.

Page 31

In the first "Branching Out" exercise, the word "yelement" should actually be "element."

Author's Commentary

On page 11, boldface text used to highlight changes to the HTML markup. Although the effect is intentional, this is a departure from the usual convention of using red text to show changes in the CSS, and should have been explained in a sidebar note.

On page 12, there has been some confusion over the following rules:

tr td#sidetop {background: #663300;}
tr td#crumbs {background: #997753;}

Several readers have written to ask why the selectors in these rules have so many pieces. After all, they could as easily be rewritten like this:

#sidetop {background: #663300;}
#crumbs {background: #997753;}

There are two reasons for the rules being written the way they are in the book:

  1. To acquaint readers with the concept of descendant selectors, as explained in the sidebar note just to the left of the code. In the same way the use of background-position keywords on page 9 justified the sidebar note, the use of a descendant selector on page 12 served a similar purpose.
  2. By adding more "pieces" to the selectors, their specificity was raised higher than it might otherwise have been. Specificity is a fairly abstract concept, and unfortunately there wasn't room for a discussion of it in the book (although it does get mentioned in Project 4). In general, the more "pieces" a selector has, the higher its specificity, and therefore the more likely it is to be considered over other rules. For a discussion of specificity as it relates to hyperlink states, see http://www.meyerweb.com/eric/css/link-specificity.html.

If you are feeling confused, then this is definitely one of those places where you should try experimenting with shorter forms of the selectors and see if anything changes. Use my examples as a starting point, not an end; what I write should never be taken as some sort of Holy Writ of CSS, from which no deviation can be tolerated. In CSS, as in Perl, there is often more than one way to get something done. Learning those different ways, and what makes each one suited to which tasks, is 90% of becoming a CSS expert. The book is intended to open the doors to some of those ways, and to teach you enough that you can start opening your own doors.