Pro CSS and HTML Design Patterns (Paperback)

by Michael Bowers (Author)
Key Phrases: inline decoration, stretched absolute, relative float, Internet Explorer, Text Replacement, Left Marginal (more...)

Editorial Reviews

Product Description

If you are looking for a complete site design solutions book, this is not it—but if you are seeking a book to help you solve many common problems—then this book will serve as a useful tool for you.

— Nate Klaiber

Pro CSS and HTML Design Patterns is a reference book and a cookbook on how to style web pages using CSS and XHTML. It contains 350 ready–to–use patterns (CSS and XHTML code snippets) you can copy and paste into your code. Each pattern can be combined with other patterns to create an unlimited number of solutions.

Each pattern works reliably in all major browsers without the need for browser hacks.

The book shows how to

• Code CSS and XHTML
• Turn HTML into XHTML
• Use CSS Selectors
• Use six CSS Box Models
• Create rounded corners, shadows, gradients, sprites, and transparency
• Replace text with images without affecting accessibility
• Style text with fonts, highlights, decorations, and shadows
• Create flexible, fluid layouts
• Position elements with absolute pixel precision
• Stack elements in layers
• Size, stretch, shrinkwrap, indent, align, and offset elements
• Style tables with borders and alternating striped rows
• Size table columns automatically
• Integrate CSS and JavaScript without embedding JavaScript in XHTML
• Create drop caps, callouts, quotes, and alerts

The book’s layout, with a pattern’s example on the left page and its explanation on the right, makes it easy to find a pattern and study it without having to flip between pages. The book is also readable from cover to cover, with topics building carefully upon previous topics.

A software developer can use this book to learn CSS for the first time. A designer familiar with CSS can use this book to master CSS and XHTML. If you are completely new to coding or completely new to CSS and XHTML, you may want to read an introductory book on CSS and XHTML first.

You can interact with all the examples in the book at www.cssDesignPatterns.com.

About the Author
Michael Bowers is a software developer who has been cranking out all kinds of code for 17 years professionally and 25 years personally. He taught himself to program when he was 14 and hasn't stopped since.

He has been the chief software developer and architect for many projects ranging from web sites to application frameworks to compilers. He has built intranet applications, automated factories with robotics, architected databases, programmed handheld devices, created sales management systems, and much more. His favorite languages include HTML, CSS, XML, SQL, C#, C, Visual Basic, and ASP.

Michael is also an accomplished pianist with a bachelor's degree in music composition and a master's degree in music theory. In his spare time he loves to improvise, arrange, and compose music.

Product Details

• Paperback: 494 pages
• Publisher: Apress (April 23, 2007)
• Language: English
• ISBN-10: 1590598040
• ISBN-13: 978-1590598047
• Product Dimensions: 9.1 x 6.9 x 1.2 inches
• Shipping Weight: 1.4 pounds (View shipping rates and policies)
• Average Customer Review: 4.6 out of 5 stars See all reviews (29 customer reviews)
• Amazon.com Sales Rank: #19,721 in Books (See Bestsellers in Books)

  Popular in these categories: (What's this?)

  #13 in	Books > Computers & Internet > Programming > Languages & Tools > XHTML
  #17 in	Books > Computers & Internet > Programming > Languages & Tools > CSS

Customer Reviews

Most Helpful Customer Reviews

30 of 34 people found the following review helpful:

5.0 out of 5 stars Limitless Depth, May 25, 2007

By	Nathan Smith (SonSpring.com) - See all my reviews (REAL NAME)

If ever you found yourself wishing that every single possible combination of CSS properties was documented in one comprehensive volume, the solution has just arrived. Pro CSS and HTML Design Patterns is just that, a huge guide to each and every HTML and CSS combination you could possibly think of. Floats, clearing, 6 types of box models, absolute and relative positioning - it's all there. Just as with programming, using coding conventions and understanding recurring combinations can help speed up the entire production work-flow.

I am always drawn to the page which describes a book author. Somehow, knowing a bit of background info helps me peer into their thought process as I read the book. In this case, the author Michael Bowers is an accomplished pianist and has a PhD in music theory. It is interesting, because just as notes and pauses can create song, so design elements and whitespace create page layouts. Michael has brought that same sense of composure to this book, describing the intricacies of code interaction and inheritance.

He has done a great job of encapsulating many possible page layouts, through having conducted thousands of test cases, paring them down to the most stable, cross-browser compatible solutions. This has resulted in over 350 readily usable design patterns. These can be combined to create limitless possibilities for your own work. Most experienced front-end architects will find themselves agreeing with a lot of the principles that are covered in this book, and for those just starting out, it will bring you up to speed on what you need to know.

There are several examples which incorporate JavaScript, but most of the book focuses on practical, real-world application of HTML and CSS, the bread and butter of all professional web developers. I wish that this type of resource had existed when I was first learning the ropes. It would have saved me countless hours of frustration learning how various aspects of CSS interact, and trying to figure out why Internet Explorer doesn't seem to get it right.

One of the awesome things about this book is that Michael has made all of the examples readily available on the companion site, with the topics broken out by chapter. So, rather than give you a laundry list of what's in this book, I will simply point you there: cssDesignPatterns.com. I really can't say enough good things about the book. If you're not already a CSS guru but want to achieve a higher level of proficiency, I'd recommend checking it out.

15 of 16 people found the following review helpful:

5.0 out of 5 stars A great resource, no matter your level of CSS knowledge, August 14, 2007

By	Nate Klaiber (nkbookreviews.com) - See all my reviews

Pro CSS and HTML Design Patterns by Michael Bowers is an incredible resource and toolbox for any level web developer. Whether you are just beginning with CSS or are of a professional status, this book has something to offer. With over 300 different design patterns, this book is the perfect resource to solve just about every problem you face. There are patterns for every aspect of your site, and their modular nature give you the potential to combine several of them to create some very unique websites. All of this comes with the added bonus that each of these design patterns have been thoroughly tested in all major browsers. There is great attention to the details throughout each of these patterns.

Contents
This book is not broken down like your typical web development book. The first 3 chapters of this book focus solely on the foundation. The first chapter discusses CSS. This includes addressing many of the common properties and values, different types of selectors, units of measure, and addressing the cascade. Chapter 2 moved on to talk about different HTML design patterns. This section outlines the basic building blocks of any HTML document such as html, doctype, head, body, and many possible elements in between. Chapter 3 moves on to the tricky subject of CSS selectors and inheritance. This becomes important throughout the rest of the book as proper inheritance will play a big role in developing our patterns and keeping our code lean and semantic. None of these three chapters are exhaustive in nature, but they give you a solid base to work with as you read throughout the rest of the book. So, while this book can be used as a resource, if you are just beginning CSS I would recommend not skipping the first three chapters.

Chapters 4 through 9 focus on the different layout options available to you. Chapter 4 starts things off by defining and discussing the Box Model. We look at several different types of the box model including inline box, inline-block box, absolute box, and floated box. Chapter 5 takes things a step further and discusses width, height, sized, shrinkwrapped, and stretched box model options. Chapter 6 addresses all of the editable properties of the Box Model and how they relate to one another. Things like margin, border, padding, background, visibility, and overflow are covered. Chapters 7 through 9 take you from the basic models to advanced layout options. Some of these are more intricate than others, but afford you some great layout techniques. We have built a base, and looked in depth at all of our available positioning models, now it is time to get down to some of the finer details of our layout and how we can style the often overlooked elements.

Chapters 10 through 19 are all focused on polishing each and every piece of your layout. We start by looking at different ways to style your text, how to give your content breathing room and your different alignment options, and gradually move to styling elements such as tables, columns, drop caps, and callouts and quotes. There are several other sections that also discuss block elements and entire layout options. We can now begin to put the pieces of the puzzle together and see how our finished product can become one cohesive whole unit.

The last chapter discusses design patterns for alerts within your layout. This chapter does include some JavaScript, but all of this is made known up-front as you implement any of the given options. We look at different alerts such as JavaScript, tooltips, popups, inline, and graphical. There are several others covered as well, but these are some of the more common ones that developers run into.

Conclusion
This is not a book that needs to be read from cover to cover to fully understand. It is used and designed as a resource to help you solve your design problems. This book would serve as a great desk reference. As stated earlier, each of the design patterns presented in this book have been thoroughly tested in all major browsers. This doesn't mean everything will work in all situations, but it does mean that each stand-alone pattern has undergone intense browser testing. It is up to you and your creativity to combine and extend them to suit your specific needs.

If you are looking for a complete site design solutions book, this is not it--but if you are seeking a book to help you solve many common problems--then this book will serve as a useful tool for you. You do not need to be a CSS professional to find great value in this book.

18 of 20 people found the following review helpful:

5.0 out of 5 stars Unequalled CSS depth, September 25, 2007

By	Frodo Baggins (Wisconsin, United States) - See all my reviews

An analogy for comparing this book to other CSS books: if other books are 2-day seminars then this book is a full fledged college course. This book takes a rigorous, organized approach to teaching you how CSS works whereas most CSS books take a "here's what you need to know" approach. It is not difficult, but it does take time to read the entire book and you cannot skip parts of the book or it won't make sense.

First, if you only read pages 70-71, then you will have gotten the value of the price of the book. Michael is the first and at this point the only person that I've seen figure out an approach very similar to O-O inheritance (not CSS hierarchical inheritance). His is example uses a button class and 3 sub-classes, whose rules are written button.square, button.rounded and button.go. This is an invaluable technique. Other sites have always said that "you can't do O-O inheritance in CSS", but he has come up with a simple way to do it.

The difference between this book and others is that he organizes CSS into a methodology that no one else has. He organizes it into box model type, box model extent and box model placement. These are the authors categories and not explicit CSS categories (though they can be said to be implied by the CSS standard). He then goes about showing you every combination of how these work together, why each is useful and their limitations, including browser limitations. It's very dry reading, but you get a grasp of CSS that you wouldn't get otherwise. For example, I always had difficulty with centering items in CSS, because it would work sometimes and not other times. In other books and on the web, I would find centering "hacks" that usually involved text-align: center, but never really understood why CSS didn't have a way to center items. It turns out that CSS does have a way to center elements, but you have to know which type of box model that you're working with as well as its limitations ( horizontally shrinkwrapped elements cannot be centered and IE6 cannot center absolute elements).

I highly recommend this book, but only if you are willing to commit time to learning it thoroughly. This is not a "get you up and running in 30 minutes" type of book.