Breadcrumbs

Review: HTML Utopia - Designing Without Tables Using CSS

CSS resources are almost too plentiful, with dozens of books and webpages covering the topic. For those who still haven't started to use CSS, this book is for you. HTML Utopia (external link) teaches you how to use CSS to create old-school, table-like layouts. It then continues by showing you how to use CSS to create layouts beyond the capabilities of traditional tables.

HTML Utopia book cover

HTML Utopia also serves as a great reference book for those already experienced in CSS. Almost one third of the book is a complete reference manual to CSS, which proves to be very handy when designing web pages. With a 163 page CSS property reference you cannot go wrong with purchasing this book as a reference tool.

The ideal process would be to learn CSS from this book, and begin using it. Then as you advance you would simply convert the book to your reference tool when you cannot remember that one property in detail. In general, this book is best for someone trying to learn the in's and out's of CSS, in a reasonable amount of time.

First Impression

When you first pick up this book it looks and feels pretty slick. The cover is a well done vector graphic in the classic SitePoint colors (blue and orange). If you take a close look at the cover you'll also see that the family is eating, but there is no table. It really fits the title - HTML Utopia: Designing Without Tables Using CSS, and it is quite sarcastic.

Once you start to flip through the pages you'll start to see the well laid out book. The pages are neatly laid out with crisp text. You'll find plenty of code examples and their output, in Mozilla. You can also find notes, hints, and tips throughout the book. Each page's layout makes HTML Utopia incredibly easy to read.

Book Chapters And Contents

Below are the table of contents of HTML Utopia:

Introduction to CSS

  • Getting the Lay of the Land
  • Putting CSS Into Perspective
  • Digging Below the Surface

Page Layout with CSS

  • CSS Web Site Design
  • Building the Skeleton
  • Putting Things in Their Place

Styling Text and other Content with CSS

  • Splashing About a Bit of Color
  • Making Fonts Consistent
  • Text Effects and the Cascade
  • Adding Graphics to the Design

Non-Obvious Uses of CSS

  • Improving the User Experience
  • Validation and Backwards Compatibility

Appendixes

  • CSS Miscellany
  • CSS Color Reference
  • CSS Property Reference
  • Recommended Resources

Learning Backwards

HTML Utopia takes a dynamic approach towards teaching readers the fundamentals of CSS. Most resources start by teaching users how to deal with fonts, lists, and forms first, and then move on to positioning page elements. HTML Utopia takes the exact opposite approach.

Dan Shafer, the author of HTML Utopia, starts by teaching the basics of CSS - what CSS is, its purpose, what it can do, including CSS in your web pages, and the many types of selectors. The next chapter then covers defining measurements and colors in CSS, required knowledge for layout construction.

The next section jumps head first into CSS layout design, covering positioning methods and some common layout techniques. This section fully covers positioning, floats, margins, padding, and borders. HTML Utopia also guides you through the basic creation of a three column layout using CSS. While guiding you through a three column layout simulation it smoothly transitions to the weakest point of the whole book.

HTML Utopia attempts to show you how to equalize column layouts using JavaScript. While this method works, it isn't the most practical method for a table-like-layout in CSS. Rather than using JavaScript, which could lead to unintended consequences, we can use a CSS method (external link) which works fine.

Shafer's backwards approach to CSS has its disadvantages and advantages. For a beginner in CSS, learning positioning and layout creation first can potentially be extremely confusing. On the other hand, for users with any CSS knowledge they will easily be able to comprehend layout creation.

This is the only noticeable downside to the entire book. While Shafer is great at writing and has an adequate knowledge of CSS, he doesn't take into consideration the way people learn. Most beginning users won't be able to take in the huge amount of information that he quickly presents to the readers. Beginning readers, it is recommended that you skip Section 2 and come back towards the end of the book.

Fantastic Appendixes

HTML Utopia comes equip with a 189 page series of appendixes. This huge CSS reference manual earns this book a position on your desk top. Taking up one third of the entire book, this reference manual is extremely useful for any web designer.

Appendix A, CSS Miscellany, covers odds and ends portraying to CSS. In this appendix you'll find information on CSS media types, aural style sheets, and using CSS with JavaScript. Many CSS books leave out these three topics, although they should be covered.

Appendix B is a sophisticated color reference, showing most commonly used colors' word values, HEX equivalents, and RGB mixtures. It also touches on the different color formats that CSS will accept, such as color names, hexadecimal values, and RGB percentages.

Appendix C is a complete CSS property reference for CSS 2.1, written by Kevin Yank. This is the most useful part of the entire book, and something not featured in other CSS books on the market. All properties of CSS 2.1, along with a few of CSS 3, are covered even if they're not supported by any browsers yet. Every property from azimuth to z-index is covered. For each property there is a description, its possible values, its compatibility, and an example.

Many Internet Explorer only properties are covered in the CSS Property Reference. Most of these properties' purposes are planned for CSS3 inclusion, or already have a CSS3 equivalent.

Appendix D is a list of books and webpages recommended for reading. After completely reading HTML Utopia these extended articles and books make a nice addition to your CSS knowledge. Each recommended read has comments by the author, so you can pick only articles that you'd personally like to read - most people don't want to read W3C Recommendations, despite how useful they potentially are.

Read Before You Buy!

Before you purchase this book, or any other SitePoint book, you should read the sample chapters (external link).

SitePoint allows you to read four sample chapters from HTML Utopia in order to self-evaluate it. You can also download them as a PDF file, but reading them online seems to be the easiest. You can also read the article that started the idea for the book (external link).

Both are quality reads, even if you don't desire to purchase HTML Utopia. It is interesting to read articles published at the start of the "CSS Revolution."

Summary

HTML Utopia: Designing Without Tables Using CSS is a great book for anyone interested in CSS, or looking for a quality desk-side manual, despite its few downsides. Covering all aspects of CSS, this book is one of the best CSS books on the market.

Title
HTML Utopia: Designing Without Tables Using CSS
Author
Dan Shafer
Publisher
SitePoint
Price
$39.95
Rating
7/10
Purchase
Buy on SitePoint.com (external link)