Preface

Every book tells a storyeven books on web design. Yet, the story of this book doesn't contain any hidden meanings or staggering cliffhangers. You won't read about people waiting for someone named Godot or a rugged archaeologist saving religious artifacts from a German army. While those books have their place, this book is for web designers and developers and for them it tells a different tale.

This book is about Cascading Style Sheets, or CSS as it's commonly abbreviated. CSS is a simple standardized syntax that gives designers extensive control over the presentation of their web pages and it is an essential component of Web design today. Compared to 1990s-era development techniques, web designers have greater control over a web site's design and can spend less time editing and maintaining web sites. CSS also extends beyond the traditional web design as well to design and control the look of a web page when it is printed.

The simplicity of Cascading Style Sheets is that you don't need any special hardware or software to use CSS. The basic requirements are a computer, a modern browser like Firefox, Safari, or Internet Explorer for Windows (to name a few), and your favorite web page editor. A web page editor can be anything from a simple text editor like Window's Notepad or Macintosh's TextEdit to a full-fledged WYSIWYG tool like Adobe Dreamweaver set in code view.

Now you know what the book is about, let me tell you the story of this book.

It's about history.

Some would say web design officially began when Tim Berners-Lee, inventor of the World Wide Web, put together the first set of web pages. Others would say it began when the center tag came about due to Netscape's own extension of HTML.

It's with a generous amount of humility and irony, I happen to believe that the web design really started with books. The books that helped lead the way to the dot-com boom in the 1990s started with Lynda Weinman's first full-color book about web graphics, Designing Web Graphics, which was published in January of 1996, and then David Siegel's Creating Killer Web Sites was published several months later that same year. These two books helped kick off the web revolution as much as those who invented the technologies that made them possible. However, the methods written in those books, while cutting edge for their time, are out-of-date in today's context.

As I write these pages, it's been 10 years since those initial books came out and a lot has changed. Another tidbit loaded with irony is that CSS was first introduced in 1996the same year Wienman and Siegel's first books about web design came out.

While neither robust nor implemented in modern browsers at the time, CSS has come a long way. Over 10 years of development have been put into CSS and it's only now, with the advent of the Internet Explorer 7 for Windows in 2006 that web designers, developers, and everyday users of browsers will be able to utilize CSS to its intended potential.

The CSS Cookbook, a collection of CSS-based solutions to common web design problems, helps web designers and developers accomplish the many designs and techniques possible with CSS.

If you are serious about building today's usable and cutting-edge web sites, use CSS and the CSS Cookbook. This is the book is one to use when you are creating your own bit of web design history.

Audience

This book is for web designers and developers struggling with the problems of designing with CSS. With this book, web builders can solve common problems associated with CSS-enabled web page designs.

CSS Cookbook is ideal for people who have wanted to use CSS for web projects, but have shied away from learning a new technology. If you are this type of reader, use the solutions in the book one or a few at a time. Use it as a guidebook, and then come back to it when you are ready or need to learn another technique or trick.

Even if you consider yourself an expert with CSS, but not an expert in basic design knowledge, this book is useful to have by the side of your computer. It covers elements of design from web typography to page layouts and a motivational chapter called "Designing with CSS" is included.

Assumptions This Book Makes

This book makes several assumptions about you, the reader. One assumption is that you possess some web design or development experience either as a hobbyist, student, or professional.

CSS Cookbook is neither an introduction to CSS nor is it a book that goes into great detail on how CSS should work in browsers, so people at the start of their web design or development education may find this book a bit more challenging than a general or complete book on the theory of CSS. If you are looking for a book that delves into such topics about the CSS specification, you should look into Cascading Style Sheets: The Definitive Guide, also from O'Reilly Media, which serves as a solid complement to this book.

If you makes use of programs like Adobe Dreamweaver only in its WYSIWG or "design" mode and rarely if ever touch the markup in "code" view, you may have trouble getting the most out of this book right away. To get an introduction to handcoding HTML, look into Learning Web Design by Jennifer Niederst Robbins (O'Reilly Media).

While WYSWIYG tools allow for CSS-enabled designs, some of the tools have not caught up with some of the unorthodox approaches recommended in this book and may cause some trouble if you attempt to implement them by editing solely in WYSIWG mode. To benefit from this book, you must be able to edit HTML and CSS by hand. Some of the code in this book can be recreated by using dialog-box driven web page building applications, but you may run into some problems along the way.

Another assumption is that web designers and developers practicing their craft with HTML table-based layouts, font tags, and single pixel GIFs will find this book both helpful and frustrating. Web designers practicing or more familiar with these old production methods are going to find CSS challenging. The "browser hell" often associated with cross-browser development where browser vendors tended to interpret the CSS specification differently or didn't implement the CSS specification completely still exists. This frustration is a natural part of the learning process. Learning how to design with CSS should be approached with patience and a good sense of humor.

The good news is that the major browser vendors seem to have solved the problems. The recent version releases of browsers appear to have implemented CSS correctly, however, attempting cross-browser support for the older or less-popular browsers may still be a challenging exercise. Yet the benefits of CSS, including greater control over the look and feel of web pages and easier maintenance over multipage web sites, outweigh the hardships associated with "browser hell."

To use the handful of solutions that make use of JavaScript, this book assumes that your have a general knowledge of the scripting language as well as the ability to successfully include JavaScript code into a web document. If this is a hurdle, we recommend that you download the code from the publisher's web site to get a first-hand look at a working example. On the other hand, if you were looking for a solution-focused book that deals with recipes where CSS plays a minor role compared to JavaScript, that book would be JavaScript & DHTML Cookbook by Danny Goodman (O'Reilly Media).

The final assumption is that you desire a resource that provides fast answers to common CSS-based web design problems. The solutions in this book, covering everything from web-based typography to multi-column layouts, are geared for the modern browsers with version numbers greater or equal to 5 with the exception of Safari, which doesn't have a version greater than 2 as of the writing of this book.

Whenever possible, I mention when a technique may cause problems in version 5 or higher browsers. While there is a chapter on hacks and workarounds to hide style sheets from browsers with poor implementations of the complete CSS specification, this book makes no assurances that you are going create pixel-perfect designs in every browser. Even with traditional web design methods from the 1990s, this has never been the case.

Contents of This Book

For me, the best use for a book like this would be to crack it open from time to time when trying to solve a particular problem, which I have done with the first edition when refreshing my memory. To that end, this book will serve well on or nearby a web builder's deskalways within reach to resolve a problem about CSS or web design. However, feel free to read the book from its first page to its last.

The following paragraphs review the contents of each chapter:

Chapter 1, General

Discusses the basics of CSS as well some techniques associated with best practices in development.

Chapter 2, Web Typography

Discusses how to use CSS to specify fonts in a web page, headings, pull quotes, and indents within paragraphs as well as other solutions.

Chapter 3, Images

Discusses CSS techniques directly related to manipulating styles and properties related to web graphics.

Chapter 4, Page Elements

Covers a loose collection of items that don't necessarily fit in every chapter, but that all carry a theme of affecting the design of the overall page. Solutions in this chapter include centering elements, setting a background image, placing a border on a page, and other techniques.

Chapter 5, Lists

Describes how to style the basic list items in various ways. Solutions include cross-browser indentation, making hanging indents, inserting custom images for list markers, and more.

Chapter 6, Links and Navigation

Shows how to use CSS to control the presentation of a link and sets of links. Solutions range from the basic like removing an underline from links, to the more complex such as dynamic visual menu.

Chapter 7, Forms

Discusses ways to work around the basic ways browsers render forms. Solutions reviewed in this chapter include setting styles to specific form elements, setting a Submit once-only button, and styling a login form.

Chapter 8, Tables

Shows how to style HTML tables. Although CSS can help eliminate HTML table-based designs, sometimes you need to style tabular data like calendars and statistical data. This chapter includes solutions for things such as: setting cellpadding, removing gaps in table cells with images, and styling a calendar.

Chapter 9, Page Layouts

Talks about how CSS can be used to engineer layouts. The solutions in this chapter include methods for one-column layouts to multicolumn layouts.

Chapter 10, Print

Provides information on how to set styles that are used when printing web pages. Solutions discussed in this chapter include adding a separate print style sheet to a web page, setting styles for web forms, and inserting URLs after links.

Chapter 11, Hacks, Workarounds, and Troubleshooting

Covers solutions on how to hide style sheets that cannot be handled by certain browsers. Recipes include hiding style sheets for browsers like Netscape Navigator 4, Internet Explorer 5 for Windows, and other browsers.

Chapter 12, Designing with CSS

Is an inspirational chapter. Focusing on the notion that CSS is merely a tool that implements design, this chapter covers things like playing with enlarging type sizes, working with contrast, and building a panoramic presentation.

Appendix A, Resources

Is a collection of links and web sites related to learning more about CSS.

Appendix B, CSS 2.1 Properties and Proprietary Extensions

Is a listing of CSS properties that help define the look and feel or, in some cases, the sound of HTML elements on a web page.

Appendix C, CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements

Is a listing of selectors available within CSS.

Appendix D, Styling of Form Elements

Is a look at how various modern browsers handle the display of form elements.

Conventions Used in This Book

The following typographical conventions are used in this book:

Plain text

Indicates menu titles, menu options, menu buttons, and keyboard accelerators (such as Alt and Ctrl).

Italic

Indicates new terms, URLs, email addresses, filenames, file extensions, pathnames, directories, and Unix utilities.

Constant width

Indicates commands, options, switches, variables, attributes, keys, functions, types, classes, namespaces, methods, modules, properties, parameters, values, objects, events, event handlers, XML tags, HTML tags, macros, the contents of files, or the output from commands.

Constant width bold

Shows commands or other text that should literally be typed by the user.

Constant width italic

Shows text that should be replaced with user-supplied values.

This icon signifies a tip, suggestion, or general note.

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your web pages and design. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product's documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: "CSS Cookbook, Second Edition, by Christopher Schmitt. Copyright 2007 O'Reilly Media, Inc., 978-0-596-52741-9."

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O'Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://www.oreilly.com/catalog/cssckbk2

To comment or ask technical questions about this book, send email to:

[e-mail]

For more information about our books, conferences, Resource Centers, and the O'Reilly Network, see our web site at:

http://www.oreilly.com

Safari Enabled

When you see a Safari® Enabled icon on the cover of your favorite technology book, it means the book is available online through the O'Reilly Network Safari Bookshelf.

Safari offers a solution that's better than e-books. It's a virtual library that lets you easily search thousands of top technology books, cut and paste code samples, download chapters, and find quick answers when you need the most accurate, current information. Try it for free at http://safari.oreilly.com.

Acknowledgments

First, thanks to David Siegel and Lynda Weinman for their inspiration and support from the beginning of web design.

I wouldn't be writing any books for an industry I love so very much without the support and friendship of Molly Holzschlag.

A lot of appreciation and respect to fellow web builders for pushing CSS-enabled web designs forward: Douglas Bowman, Tantek Çelik, Dan Cenderhlem, Mike Davidson, Ethan Marcotte, Eric A. Meyer, Mark Newhouse, Dave Shea, and Jeffrey Zeldman.

Special thanks go to the technical editors, Erik J. Barzeski, Liza Daly, and John Allsopp, and as well as the copy editor, Nancy Reinhardt, for their time, expertise and patience.

To my friend, Porter Glendinning, who seems to have a knack for not only being able to read W3C specifications and see their implications two or three steps ahead of most web developers, but also articulates those thoughts in such a way as to make me believe that even my grandmother could understand what he's talking about. Your translation services and thoughts are truly appreciated.

Special thanks to Tatiana Apandi. Tatiana did a great job of making sure my questions were answered and guiding me throughout the life of the project. This writing process has been my most challenging, but most rewarding experience to date. And, frankly, I wouldn't have wanted it any other way with any other publisher.

Thanks to my friends who know me as the web geek I truly am: Katrina Ferguson, Kelly and Nathan Hensley, Trueman Muhrer, Eric Ellis, Jessica Lorenzi, Ansley Simmons, Mark Trammell, and Ryan Yordon.

Thanks to my family for the love and appreciation. Your support through good times and bad has been a rock. As always, I'm looking forward to our next reunion.