Oakland.pm

Reviews

Review of "HTML Utopia: Designing Without Tables Using CSS"

author: Dan Schafer

reviewer: George Woolley

HTML Utopia: Designing Without Tables Using CSS
By Dan Shafer
Publisher: SitePoint
May 2003
ISBN: 0-9579218-2-9
480 pages, $39.95 US, $57.95 CA

Short Review

A Very Good Book   :) :) :) :) of 5

This book may be viewed as an introductory CSS design guide. You could learn CSS from it if you're motivated, but it doesn't try to be a CSS tutorial.

To benefit from this book, you should be comfortable with HTML. If you are comfortable with HTML, this book provides valuable perspective on CSS as well as details on how to use the elements of CSS to build websites.

If you are comfortable using basic HTML and are motivated, this would be a good book to learn both CSS and a perspective on how to use it.

If you are using CSS but are still using tables for page layout, this book would be a very good way to learn why and how to instead use CSS for page layout.

For more detail, see my somewhat longer review.

George Woolley of Camelot.pm and Oakland.pm

top

Miscellaneous

Chapter Titles

  • Getting the Lay of the Land
  • Putting CSS Into Perspective
  • Digging Below The Surface
  • CSS Web Site Design
  • Building the Skeleton
  • Putting Things in Their Place
  • Splashing Around a Bit of Color
  • Making Fonts Consistent
  • Text Effects and the Cascade
  • Adding Graphics to the Design
  • Improving the User Experience
  • Validation and Backward Compatibility

Parts:

  • Introduction to CSS (ch. 1-3)
  • Page Layout with CSS (ch. 4-6)
  • Styling Text and other Content with CSS (ch 7-10)
  • Non-Obvious Uses of CSS (ch. 11-12)

Note:

top

Online Watch

As of 2004-11-25, I don't see this book on Safari Tech Books Online. However, the table of contents and sample chapters (and much more) are available here.

top

Some Relevant Acronyms

CSS: Cascading Style Sheets.

  • style sheets from multiple sources (the designer, the browser, the user) whose rules are applied in sequence according to a set of rules that resolve conflicts.
  • allows for a high degree of separation between content and presentation.
  • makes it easy to change the style of many pages at once.
  • refers ambiguously to CSS1, CSS2, etc.

CSS1: CSS level 1.

  • a W3C specification and recommendation for CSS (1996-05-12, revised 1999-01-11).
  • specifies basic properties such as fonts, colors, margins, ...

CSS2: CSS level 2.

  • a W3C specification and recommendation for CSS (1998-05-12).
  • includes CSS1.
  • specifies many extensions including for table layout, content positioning, downloadable fonts, generated text, ...
  • supports media-specific style sheets for presentation on printers, hand-held devices, braille devices, ...

HTML: HyperText Markup Language.

  • a markup language used for specifying hypertext documents on the Web.

W3C: The World Wide Web Consortium.

  • develops protocols for the Web to encourage its evolution.
  • has over 300 organizations as members.

top

CSS Advantages Checklist

  • Increased Stylistic Control
  • Centralized Design Information
  • Semantic Content Markup
  • Accessibility
  • Standards Compliance

Note:

  • Each of the above is addressed in a section of Chapter 4.
  • Using CSS makes HTML pages easier to write and maintain.

top

Some Relevant Links

The Inspiration

A Couple of Color Links

A Couple of W3C Links

Some Good Examples of Using CSS

Notes:

  • The links above are taken from the book (except for the link to Standard CSS next to the Sitepoint link).
  • I've found all these links to be useful.
  • There are many other useful links in the book.

The article, which is listed above as the inspiration for this book, lists still another article as its inspiration:

top

Somewhat Longer Review

Contents

What Are Cascading Style Sheets?

In this section I say what a style sheet is at all and briefly explain a few terms which come up later in the review.

A cascading style sheet (CSS) consists of a set of rules that tell a browser how the HTML the CSS applies to should be presented. For more on the meaning of CSS (and CSS2 too), see Some Relevant Acronyms (in the left column).

There can be multiple style sheets. For example, there can be a user style sheet and an author style sheet.

Selectors and Properties: The book gives the following example of a CSS rule: 

h1 {
     color: red;
     font-size: large;
}

This rule says that h1 headings should be red and large. The h1 in this rule is called a selector; that's because it selects a markup element the rule is intended for. Two specific properties are defined in the body of the rule: color and font-size.

Cascading Multiple style sheets can apply to the same page and even within a particular style sheet there could be multiple rules that could apply to a particular tag in the HTML. Cascading addresses the question which rules actually apply.

The Box Model In HTML, everything you deal with can be seen as contained in a box. Consider the following HTML: 

<body>
   <p>The <em>cat</em> is on the mat.</p>
</body>

In this example, there are 3 boxes or containers (if you prefer). The body container contains a p (or paragraph) container which contains an em container. Boxes within boxes.

Inheritance Under certain circumstances and depending on the CSS, the p and em in the earlier example could take on the properties of a tag they are contained in. This is called inheritance.

top

The Title and the Cover

Hm, maybe you shouldn't judge a book by the cover, but you can get an idea of what the publisher is committing to. The following is based on the cover of the copy I have.

Designing Without Tables Using CSS: In HTML, tables were intended for tabular material. But they ended up being used heavily for layout, with unfortunate consequences for performance and for maintenance.

If you follow the author's advice, you'll still use tables for tabular material, but mostly you'll use CSS to eliminate the need for tables. By doing that you'll also eliminate the unfortunate consequences.

HTML Utopia: The idea is that using CSS in the way the author proposes is radically better than using nested tables for layout.

Other Words on the Cover: In addition to the title are the words

  • "Includes a Complete CSS2 property reference"
  • "A Practical Step-by-Step Guide"

How does the title fit?: The author does show us how to use CSS in web design with minimal use of tables.

"HTML Utopia" is kind of flowery, but in my opinion does a good job of getting across the idea. Hey, you can just code very simple HTML and specify the presentation details in a separate CSS file. It seems like magic when you make a change to your CSS file and the presentation of all your pages changes instantly. "HTML Utopia" works for me.

There is, indeed, an extensive CSS2 property reference (in Appendix C).

I'm not certain what "Step-by-Step" means on the cover. It could just be a longer and more enticing way of saying gradual. What I don't see is small, clearly labeled steps, which is what I was expecting from the cover. I do, however, buy "Practical Guide".

top

About the Reviewer

No, I don't think you care about my background. However, perhaps, knowing a little about it will aid you in determining how to interpret this review.

Programming: My work background has been primarily in software development. My favorite programming language is Perl.

Publishers: As a programmer, I became a fan of O'Reilly technical books, especially on Perl, Unix and related subjects. More recently, I've learned that they also publish really good books on a wide variety of subjects that somehow relate to computer technology.

This may be relevant since

  • O'Reilly is not the publisher of this book; Sitepoint is.
  • O'Reilly has a working relationship with Sitepoint.

Books: Back when I first heard of CSS, I was skeptical. From reading about it, it looked to me that it added an unnecessary level of complexity and that it was basically a waste of time. A lecture by Dan Meriwether convinced me of its merit. He recommended I read "Cascading Style Sheets: Designing for the Web" by Håkon Wium Lee and Bert Bos (Addison Wesley 1997) which completed my conversion. I still find it useful as a reference after all these years.

I own a copy of "Cascading Style Sheets: The Definitive Guide" by Eric A. Meyer (O'Reilly 2000). And I have access to the current edition on my "bookshelf" on Safari Tech Books Online.

I've also read (and reviewed) "CSS Cookbook" by Christopher Schmitt (O'Reilly 2004).

Training: For a programmer, I've done way more than my share of writing and training. For several years, I worked for a UNIX training company where, among other things, I designed and wrote content for step-by-step manuals.

Website Design Background: Well, I

  • am webmaster of a number of non-profit sites
  • have been using CSS for a number of years, but mostly CSS 1
  • tend to keep HTML/CSS simple and separate
  • generally edit CSS and HTML using vim (i.e. a text editor)

However, I'm not a professional web designer. In the author's terms, I would guess I'm an intermediate web designer (i.e., one of the people the book is designed for).

OS and Browsers: When I access the web, I'm usually doing that from a Linux box. The browsers I use the most for accessing the web are Mozilla Firefox, Konqueror and Opera.

I also sometimes use IE or Netscape on a Mac (System 9).

top

What You Get

IMO, the most important parts of the book are the 4 parts of the body plus one of the appendixes. I'll briefly describe what you get in each. My descriptions are not intended to be complete but are intended to give the general idea of what's there.

An Intro to CSS: The first part of the book gives useful perspective on CSS and also covers CSS basics. Some of the questions you'll find answers for there are:

  • What is CSS?
  • What is CSS good for?
  • What is CSS not good for?
  • What is the structure of a CSS rule?
  • What different types of selectors may be included in CSS rules?
  • How can you express measurements in CSS?

Page Layout with CSS: The second part tells you how to use CSS to facilitate the layout of a page.

In this part, you'll find answers to questions like:

  • What are some examples of good layout on the web? (See the links to examples in the left column.)
  • What properties are relevant to the CSS box model and how do they interact?
  • How can you layout a two or three column page (without using tables, naturally)?
  • How can you create a top header area? (again, no tables)

Styling with CSS: The third part has to do with using CSS to style text and other content.

Some of the questions you'll find answers for are:

  • What can you do with color using CSS?
  • What can you do with fonts using CSS?
  • How can you style lists using CSS?
  • How does cascading work in CSS?

Other Important Topics: The fourth part covers some useful topics that didn't fit into the earlier parts.

Some of the questions answered are:

  • How can you make slick menus and submenus using CSS?
  • What's a good way to validate one's CSS files?
  • What can you do about older browsers?

A CSS Properties Reference: Another thing you get is a reference for CSS properties which are included in the CSS recommendations (CSS1 or CSS2) or which are included as an extension in a major current browser.

The entry for each property includes

  • the function of the property
  • what values it can have
  • what kind of support it has among browsers
  • an example or examples of the property's use in CSS

The browsers referred to include

  • Internet Explorer 4 and later (sometimes a distinction is made between the Mac and Windows versions)
  • Netscape 4 and later
  • Opera 5 and later
  • Mozilla browsers as a group

top

Likes

A Way to Think about CSS: The best thing about this book is the perspective the author provides on CSS and its use. The most important points are:

  • CSS allows you to separate content and appearance
  • CSS allows you to create complex page layouts without a snarl of tables.

But the devil is in the specifics of such insights (and their application), as you'll see, for example, in sections on tables (and on replacing them) with titles such as:

  • "Tables Mean Long Load Times"
  • "Use of Transparent Images Slows Us Down" (This workaround becomes unnecessary when using CSS for layout.)
  • "Maintaining Tables Is a Nightmare"
  • "When it's OK to Use a Table"
  • "Basic Three-Column Layout" (without tables, of course)

The Property Reference Appendix: I've looked up a number of things in the Property Reference and found the information there both clear and useful.

Useful References: There are a number of useful references scattered through the book and in a section just before the index. Most of the references are accessible on the web. For example, most of the references under "Some Relevant References" (in the left column) are from the book.

top

Gripes

This is a very good book. I don't have much to gripe about. :-( :-) Must think of something, so here goes.

CSS Color Reference: There's an Appendix on this topic. In that appendix are two tables of color names.

Personally, I'm only interested in the color names listed in the two tables for teaching purposes and for prototyping. Mostly, I think they are useless; I'm not sure they merit most of an appendix.

Then, again, they only take up 6 pages, and I do occasionally have a use for them. Moreover, the author explains that for many designers including himself the color names are quite adequate; he likely knows a lot more designers than I, so I'll take his word for it.

An Uninformative Title: The title of Part IV of this book is "Non-Obvious Uses of CSS". I don't think this is a helpful title.

I have no quarrel with the contents of the part. But it seems to me, for example, that it's fairly obvious that one should validate one's CSS. Moreover, I don't think of that as using CSS. Perhaps, I'm missing the point. At a minimum, I'd say the author is not clear here.

But do I care? Not much.

Looking at CSS Examples on the Web: As far as I can recall, the book doesn't say how useful it is to look at the CSS for pages on the web nor how easy it is to do so.

These are very useful things to know.

Missing Inheritance: There's a section in the book entitled "Cascading and Inheritance". In the intro to the section, the author says he's going to provide a couple of examples to illustrate the difference between cascading and inheritance and then go more deeply into both subjects. He then launches into a very clear explanation of how cascading works. He skips the examples and never gets back to inheritance in the section.

Much earlier in the book, there is an explanation of inheritance and the intro to the section provides the info I think you most need to know about the relationship between cascading and inheritance, so this is not a serious problem. It is, however, mildly confusing.

top

Who's the Book for?

The book claims to be for beginning and intermediate web designers. The stated prerequisite is a good knowledge of HTML.

I concur.

A Good Knowledge of HTML: But what is meant by "a good knowledge of HTML"? You definitely don't have to have mastered (or even used) all the different HTML tags.

The following would be sufficient IMO

  • knowing basic tags such as: a, img, em; h1, h2; p; ul, li
  • having produced a number of simple web pages
  • being able to look up tags you don't know (and I don't think there'll be many)
  • understanding what an attribute is in HTML

For a Beginning Web Designer: This really is a very good book for a beginning web designer. You don't need to be expert at HTML; that's partly because your HTML will tend to be quite simple if you take this book to heart.

For an Intermediate Web Designer: If you have a solid grasp of CSS and what it can do for you, you don't need this book; but then I'd say you aren't an intermediate web designer. If you don't have a solid grasp on CSS and what it can do for you, you can use this book to begin to change that.

top

Final Thoughts

If you are a beginning or intermediate web designer, this book is worth considering. The only thing you need to know, for sure, is basic HTML.

top

Completed: 2004-12-01