CSS Cookbook, 3rd Edition

Preface

Every book tells a story—even books on web design tips and techniques.

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 is an essential component of web design today.

Compared to 1990s-era development techniques, CSS gives web designers greater control over their designs so that they can spend less time editing and maintaining their websites. CSS also extends beyond traditional web design to designing and controlling the look of a web page when it is printed.

You don’t need any special hardware or software to design web pages. The basic requirements are a computer, a modern browser such as 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 such as Notepad (for Windows) or TextEdit (for the Mac), to a full-fledged WYSIWYG tool such as Adobe Dreamweaver set in code view.

Now you know what the book is about. Let me tell you its story, its 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.

Though it might seem ironic, I happen to believe that this new media really got 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 (Pearson), which was published in January 1996, and then David Siegel’s Creating Killer Web Sites (Hayden), published several months later that same year. These two books helped to kick off the web revolution as much as those who invented the technologies that made the Web possible.

However, the methods written in those books, although cutting edge for their time, are out of date in today’s context. As I write these pages, it has been 13 years since those initial books were published; the same year Weinman’s and Siegel’s first books about web design came out describing how to use font tags, nested tables, and single-pixel GIFs was the same year CSS was first introduced.

CSS has come a long way since then. With more than 13 years of development put into it, it’s only now—with the advent of Internet Explorer 8 for Windows reaching a large audience—that web designers, developers, and everyday users of browsers can use CSS2 to its intended potential.

In addition to IE8, other browsers are making their presence known, and are often ahead of Internet Explorer in supporting new features. Browsers such as Firefox, Safari, Chrome, and Opera are implementing the latest specifications of CSS3 and HTML5 as quickly as the World Wide Web Consortium (W3C) Working Groups’ members are bandying them about.

If you are serious about building today’s usable and cutting-edge websites, use CSS and CSS Cookbook, a collection of CSS-based solutions to common web design problems. Together they can help you create 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 come back to it when you are ready or need to learn another technique or trick.

Even if you consider yourself an expert in CSS, but not in basic design knowledge, this book is useful to have next to your computer. It covers elements of design from web typography to page layouts, and even includes a chapter on designing with CSS to get you motivated.

Assumptions This Book Makes

This book makes several assumptions about you, dear reader.

One assumption is that you possess some web design or development experience either as a hobbyist, a student, or a professional.

Since CSS Cookbook is neither an introduction to CSS nor a book that goes into great detail on how CSS should work in browsers, people at the start of their web design or development education might 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 CSS: The Definitive Guide, Third Edition, by Eric A. Meyer (O’Reilly), which serves as a solid complement to this book.

If you use a program such as Adobe Dreamweaver only in its WYSIWYG or design mode and rarely, if ever, touch the markup in code view, you might 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).

Although WYSIWYG 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 might cause some trouble if you attempt to implement them by editing solely in WYSIWYG 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 re-created using dialog-box-driven web page building applications, but you may run into some problems along the way trying to click tabs and enter CSS values into said tabs.

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 who are practicing or are more familiar with these old production methods are going to find CSS challenging. The “browser hell” often associated with cross-browser development still exists, as browser vendors tended to interpret the CSS specification differently or didn’t implement the CSS specification completely. This frustration is a natural part of the learning process. You should approach the process of learning how to design with CSS with patience and a good sense of humor.

The good news is that the major browser vendors seem to have solved the problem. 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 websites, outweigh the hardships associated with browser hell.

A handful of solutions within this book use JavaScript and the JavaScript framework, jQuery. This book assumes that you 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, I recommend that you download the code from the O’Reilly website to get a firsthand 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).

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 multicolumn layouts, are geared for modern browsers with version numbers later than or equal to 5, with the exception of Safari and Chrome.

Whenever possible, I mention when a technique might cause problems in modern browsers. Although there is a chapter on hacks and workarounds to hide stylesheets from browsers with poor implementations of the complete CSS specification, this book makes no assurances that you are going to create pixel-perfect designs in every browser. Even with traditional web design methods from the 1990s, this has never been the case (see http://dowebsitesneedtolookexactlythesameineverybrowser.com/ for more information).

Contents of This Book

For me, the best use for a book such as this is to crack it open from time to time when trying to solve a particular problem, which I did with the first edition of the book to refresh my memory while writing this edition. To that end, this book will serve you well on or near your desk—always 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 and the appendixes.

Chapter 1, goes over semantic markup solutions on content.

Chapter 2, discusses the general concepts of CSS as well as some techniques associated with best practices in development.

Chapter 3, discusses how to use CSS to specify fonts in web pages, headings, pull quotes, and indents within paragraphs as well as other solutions.

Chapter 4, discusses CSS techniques directly associated with manipulating styles and properties related to web graphics.

Chapter 5, 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 cover the topics of centering elements, setting a background image, placing a border on a page, and other techniques.

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

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

Chapter 8, discusses how to work around the basic ways browsers render forms. You’ll learn how to set styles to specific form elements, set a submit-once-only button, and style a login form, among other things.

Chapter 9, shows how to style HTML tables. Although CSS can help you eliminate HTML table-based designs, sometimes you may need to style tabular data such as calendars and statistical data. This chapter includes solutions for setting cell padding, removing gaps in table cells with images, and styling a calendar.

Chapter 10, talks about how you can use CSS to engineer layouts. The solutions in this chapter include methods for designing one-column layouts as well as multicolumn layouts.

Chapter 11, provides information on how to set styles that are used when printing web pages. Solutions discuss how to add a separate print stylesheet to a web page, set styles for web forms, and insert URLs after links.

Chapter 12, provides solutions that enable you to hide stylesheets that certain browsers cannot handle. Recipes include hiding stylesheets for browsers such as Netscape Navigator 4, Internet Explorer 5 for Windows, and others.

Chapter 13, is an inspirational chapter. Focusing on the notion that CSS is merely a tool that implements design, this chapter covers topics such as playing with enlarging type sizes, working with contrast, and building a panoramic presentation.

Chapter 14, demonstrates how to use the JavaScript framework, jQuery, in conjunction with CSS for more advanced effects.

Appendix A is a collection of links and websites you can access to learn more about CSS.

Appendix B is a listing of CSS 2.1 properties that can help you define the look and feel of, or, in some cases, the sound of HTML elements on a web page.

Appendix C is a listing of selectors, pseudo-classes, and pseudo-elements available within CSS 2.1.

Appendix D is a listing of selectors and pseudo-classes available from the new CSS3 specification.

Appendix E takes a look at how various modern browsers handle the display of form elements. The print book version contains an introduction to this appendix, as well as information on how you can access the full version. The online version of this appendix contains lookup tables that allow you to quickly check out which CSS properties are supported, as well as the entire form element review that contains screenshots of every test.

Conventions Used in This Book

The following typographical conventions are used in this book:

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 be typed literally by the user

Constant width italic

Shows text that should be replaced with user-supplied values

Note

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

Warning

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_, Third Edition, by Christopher Schmitt. Copyright 2010 O’Reilly Media, Inc., 978-0-596-15593-3.”

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

We’d Like to Hear from You

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/9780596155933

This book also has another website:

http://csscookbook.com

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 website at:

http://www.oreilly.com

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.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.

I’d like to acknowledge my appreciation and respect for the following fellow web builders for pushing CSS-enabled web designs forward: Douglas Bowman, Tantek Çelik, Dan Cederholm, Mike Davidson, Ethan Marcotte, Eric A. Meyer, Mark Newhouse, Dave Shea, Nicole Sullivan, Stephanie Sullivan, and Jeffrey Zeldman.

Special thanks go to the technical editors, Opera Web Evangelist Bruce Lawson, Shelley Powers, and Edd Dumbill, as well as copyeditor Audrey Doyle, for their time, expertise, and patience.

Special thanks also go to Tatiana Diaz, my editor for the previous edition of this book.

Simon St.Laurent took over for Tatiana in the role of editor for this edition. His calm demeanor and ability to guide this book through the production process made the metallic bladelike swooshing sounds of deadlines bearable.

Thanks to my friends who know me as the web geek I truly am, and who are OK with me not mentioning them all by name.

Thanks to Jessica, who made me a chocolate cake with homemade chocolate icing and chocolate chips to celebrate my birthday and the release of the previous edition. I enjoyed it immensely, and my dentist appreciated the extra work. I’m not expecting another cake, but I did put you in my acknowledgments.

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

Thanks to Ari Stiles for being OK with me taking time out to work on this book. I love you.

And to my dad, I dedicate this book once again. Thanks for being the best dad ever.

—Christopher Schmitt, Fall 2009

http://christopherschmitt.com

http://twitter.com/teleject