Introduction
Designers are traditionally creative types, tending to favor the right brain, while programmers examine
the details of a system more clearly, preferring a left-brain mode of thinking. So, when faced with the
challenge of designing for the Web, designers are faced with what on the surface appears to be an oxy-
moron, a design technology named cascading style sheets (CSS).
CSS is a Web markup standard set by the Worldwide Web Consortium (W3C) that enables Web design-
ers and developers to define consistent styles in Web pages, and to apply the template to multiple pages.
CSS is a valuable tool for streamlining and speeding up Web development, although browser compati-
bility issues are a major pitfall.
While WYSIWYG Web page editors are getting closer and closer to a complete visual authoring experi-
ence, those software applications aren’t truly professional CSS design tools. CSS by its nature is a tech-
nology that, for the most part, must be written out manually to create compelling work. The problem
with that is that most designers have a hard time committing to writing lines of code to get their work
done.
Designers who express sheer joy in writing PostScript by hand are hard to find. Designers let Adobe
Illustrator (or any similar program) provide a visual authoring environment and hide the coding in the
background. All the designer sees is the imagery, while the computer handles the workload.
Another hindrance to using CSS doesn’t have anything to do with CSS itself, but rather the implementa-
tion of CSS in Web browsers. Browser vendors incorporated the technology into their browsers slowly
over time. While CSS support is nearly 100 percent as of now, designers still run into problems when try-
ing to shore up their designs in older or outdated browsers. That means diving into the guts of CSS and
coding hacks and workarounds. The bottom line translates into more time writing and revising code,
and less time working in WYSIWYG tools.
Does this mean that CSS is this out-of-control or untamable technology? Not in the least, but it does take
some concerted effort to wrangle professional-looking designs.
Even if you know the basics of CSS (the properties, the acceptable values, the selectors, and so on),
putting the technology to effective use can be difficult to downright frustrating. CSS stymies the best
of us — even those who actually understand the W3C specifications as opposed to those who can only
skim them in awe in their browsers.
In the right hands, however, CSS is the tool.
Once designers have mastered the basics of the technology, the understanding of its purpose, and have
obtained a certain amount of experience with the technology, almost any design idea sketched on a cock-
tail napkin or doctored in Adobe Photoshop becomes possible.
To help you get to that point, keep Professional CSS nearby.
Professional CSS is one of the few books on the market today that address designing standards-based CSS
on large, multi-page, well-designed, real-world sites using CSS in an integrated fashion. Focusing on the
best-practices aspect of Web development, and using examples from real-world Web sites, this book
uniquely offers applied, CSS-enabled solutions to design problems.
Whom This Book Is For
Those designers who understand CSS at an intermediate to advanced level, but who are not clear on
how to effectively develop CSS-enabled designs at a professional level, will benefit tremendously from
the information in this book. In particular, the following readers will find this book most useful:
Intermediate to experienced HTML users new to CSS. Any professional Web developer who
has been exposed to CSS, but needs a better understanding of how to put the pieces together to
create professional-level Web sites.
Professional designers. Professional Web developers learning CSS (without any knowledge of
traditional, 1990s-era design practices) and want to understand the best practices for utilizing
the technology.
How This Book Is Structured
Core chapters of this book focus on one designer and a Web site that designer worked on. Each chapter
provides easily digestible demonstrations of CSS tips and techniques used for the site. Additionally,
designers provide greater insight into their process by talking about what they would have done
differently.
Following is a brief overview of how this book is organized and which co-authors have contributed their
insights:
provides easily digestible demonstrations of CSS tips and techniques used for the site. Additionally,
designers provide greater insight into their process by talking about what they would have done
differently.
Following is a brief overview of how this book is organized and which co-authors have contributed their
insights:
Chapter 1, “The Planning and Development of Your Site.” To get things rolling, you must be
familiar with all the preliminaries that proven professionals iron out before they begin working
on their sites. This chapter helps you avoid problems later in the development of your site by
properly planning what must be done.
on their sites. This chapter helps you avoid problems later in the development of your site by
properly planning what must be done.
Chapter 2, “Best Practices for XHTML and CSS.” Ethan Marcotte, a steering committee mem-
ber of the Web Standards Project and a recognized leader of the standards-based Web design
movement, shares some insights on using Extended HTML (XHTML) with CSS.
Chapter 3, “Blogger: Rollovers and Design Improvements.” Dunstan Orchard, also a member
of the Web Standards Project, delves into the behind-the-scenes development of a new look and
feel for blogger.com (a Google Web log site). Orchard’s interview with one of the principals in
the project, Douglas Bowman (an influential designer whose highly publicized and hugely suc-
cessful redesigns of several Web sites have pushed him to the forefront of standards-compliant
Web design), provides some extremely valuable insight. This chapter also addresses key issues
such as bounding boxes and rollovers.
feel for blogger.com (a Google Web log site). Orchard’s interview with one of the principals in
the project, Douglas Bowman (an influential designer whose highly publicized and hugely suc-
cessful redesigns of several Web sites have pushed him to the forefront of standards-compliant
Web design), provides some extremely valuable insight. This chapter also addresses key issues
such as bounding boxes and rollovers.
Chapter 4, “The PGA Championship.” As a Senior Interactive Designer at Turner Sports
Interactive, Todd Dominey has been designing and developing Web destinations for major
Professional Golf Association (PGA) tournaments, including the PGA Championship and The
Ryder Cup. In this chapter, Dominey provides a first-hand perspective on the ins and outs of
designing a site relied upon by millions of sports fans all over the world. Key issues addressed
in this chapter include drop shadows, drop-down menus, and embedding Flash content into a
Web site.
Professional Golf Association (PGA) tournaments, including the PGA Championship and The
Ryder Cup. In this chapter, Dominey provides a first-hand perspective on the ins and outs of
designing a site relied upon by millions of sports fans all over the world. Key issues addressed
in this chapter include drop shadows, drop-down menus, and embedding Flash content into a
Web site.
Chapter 5, “The University of Florida.” Mark Trammell, who is in charge of directing the Web
presence at one of the country’s leading universities, discusses how the University of Florida
developed a Web site to benefit both students and faculty. Key issues addressed in this chapter
include tackling browser compatibility issues, as well as developing functional navigational
structures.
developed a Web site to benefit both students and faculty. Key issues addressed in this chapter
include tackling browser compatibility issues, as well as developing functional navigational
structures.
Chapter 6, “ESPN.com: Powerful Layout Changes.” Dunstan Orchard talks with Mike Davidson,
Senior Associate Art Directory and Manager of Media Product Development at the Walt DisneyInternet Group, about an extremely effective makeover for ESPN.com. Orchard discusses how
designers were able to develop a site that provides the flexibility required by an organization feed-
ing its readers up-to-date sports information.
Chapter 7, “FastCompany.com: Building a Flexible Three-Column Layout.” Ethan Marcotte
sat down with Dan Cederholm to discuss the extreme makeover of the Web site for Fast
Company, publisher of a popular magazine by the same name. In addition to this provocative
interview, Marcotte presents tips on CSS positioning and, in particular, details surrounding
effective three-column layouts.
Chapter 8, “Stuff and Nonsense: Strategies for CSS Switching.” In addition to an interview
with Andy Clarke (Creative Director for Stuff and Nonsense), Ethan Marcotte explores how to
improve Web site accessibility for all users to further ensure universal access. In this chapter,
Marcotte delves into CSS switching and ways to overcome pesky browser compatibility prob-
lems. The innovations displayed at the Stuff and Nonsense site provide excellent examples of
these techniques.
Chapter 9, “Bringing It All Together.” Lead author Christopher Schmitt uses his own success-
ful Web site development to show how all the tips and techniques presented in the book can be
put to practical use.
Additionally, the appendixes in this book provide handy reference material for HTML 4.01 elements,
rules for HTML-to-XHTML conversions, properties of CSS 2.1, and even a troubleshooting guide to help
with common problems.
Conventions
To help you get the most from the text and keep track of what’s happening, we’ve used a number of con-
ventions throughout the book.
Boxes like this one hold important, not-to-be-forgotten information that is directly
relevant to the surrounding text.
Tips, hints, tricks, and asides to the current discussion are offset and placed in italics like this.
As for styles in the text:
We highlight important words when we introduce them.
We show keyboard strokes like this: Ctrl+A.
We show filenames, URLs, and code within the text like so: persistence.properties.
We present code in two different ways:
In code examples we highlight new and important code with a gray background.
The gray highlighting is not used for code that’s less important in the present
context, or has been shown before.
Errata
We make every effort to ensure that there are no errors in the text or in the code. However, no one is per-
fect, and mistakes do occur. If you find an error in one of our books, such as a spelling mistake or faulty
piece of code, we would be very grateful for your feedback. By sending in errata you may save another
reader hours of frustration and at the same time you will be helping us provide even higher quality
information.
To find the errata page for this book, go to www.wrox.com and locate the title using the Search box or
one of the title lists. Then, on the book details page, click the Book Errata link. On this page you can view
all errata that has been submitted for this book and posted by Wrox editors. A complete book list includ-
ing links to each book’s errata is also available at www.wrox.com/misc-pages/booklist.shtml.
If you don’t spot “your” error on the Book Errata page, go to www.wrox.com/contact/
techsupport.shtml and complete the form there to send us the error you have found. We’ll check
the information and, if appropriate, post a message to the book’s errata page and fix the problem
in subsequent editions of the book.
p2p.wrox.com
For author and peer discussion, join the P2P forums at p2p.wrox.com. The forums are a Web-based sys-
tem for you to post messages relating to Wrox books and related technologies and interact with other
readers and technology users. The forums offer a subscription feature to e-mail you topics of interest of
your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts,
and your fellow readers are present on these forums.
At http://p2p.wrox.com you will find a number of different forums that will help you not only as
you read this book, but also as you develop your own applications. To join the forums, just follow these
steps:
1 Go to p2p.wrox.com and click the Register link.
2 Read the terms of use and click Agree.
3 Complete the required information to join as well as any optional information you wish to pro-
vide and click Submit.
4 You will receive an e-mail with information describing how to verify your account and com-
plete the joining process.
You can read messages in the forums without joining P2P, but in order to post your own messages you
must join.
Once you join, you can post new messages and respond to messages other users post. You can read mes-
sages at any time on the Web. If you would like to have new messages from a particular forum e-mailed
to you, click the Subscribe to this Forum icon by the forum name in the forum listing.
For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to ques-
tions about how the forum software works as well as many common questions specific to P2P and Wrox
books. To read the FAQs, click the FAQ link on any P2P page.
ventions throughout the book.
Boxes like this one hold important, not-to-be-forgotten information that is directly
relevant to the surrounding text.
Tips, hints, tricks, and asides to the current discussion are offset and placed in italics like this.
As for styles in the text:
We highlight important words when we introduce them.
We show keyboard strokes like this: Ctrl+A.
We show filenames, URLs, and code within the text like so: persistence.properties.
We present code in two different ways:
In code examples we highlight new and important code with a gray background.
The gray highlighting is not used for code that’s less important in the present
context, or has been shown before.
Errata
We make every effort to ensure that there are no errors in the text or in the code. However, no one is per-
fect, and mistakes do occur. If you find an error in one of our books, such as a spelling mistake or faulty
piece of code, we would be very grateful for your feedback. By sending in errata you may save another
reader hours of frustration and at the same time you will be helping us provide even higher quality
information.
To find the errata page for this book, go to www.wrox.com and locate the title using the Search box or
one of the title lists. Then, on the book details page, click the Book Errata link. On this page you can view
all errata that has been submitted for this book and posted by Wrox editors. A complete book list includ-
ing links to each book’s errata is also available at www.wrox.com/misc-pages/booklist.shtml.
If you don’t spot “your” error on the Book Errata page, go to www.wrox.com/contact/
techsupport.shtml and complete the form there to send us the error you have found. We’ll check
the information and, if appropriate, post a message to the book’s errata page and fix the problem
in subsequent editions of the book.
p2p.wrox.com
For author and peer discussion, join the P2P forums at p2p.wrox.com. The forums are a Web-based sys-
tem for you to post messages relating to Wrox books and related technologies and interact with other
readers and technology users. The forums offer a subscription feature to e-mail you topics of interest of
your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts,
and your fellow readers are present on these forums.
At http://p2p.wrox.com you will find a number of different forums that will help you not only as
you read this book, but also as you develop your own applications. To join the forums, just follow these
steps:
1 Go to p2p.wrox.com and click the Register link.
2 Read the terms of use and click Agree.
3 Complete the required information to join as well as any optional information you wish to pro-
vide and click Submit.
4 You will receive an e-mail with information describing how to verify your account and com-
plete the joining process.
You can read messages in the forums without joining P2P, but in order to post your own messages you
must join.
Once you join, you can post new messages and respond to messages other users post. You can read mes-
sages at any time on the Web. If you would like to have new messages from a particular forum e-mailed
to you, click the Subscribe to this Forum icon by the forum name in the forum listing.
For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to ques-
tions about how the forum software works as well as many common questions specific to P2P and Wrox
books. To read the FAQs, click the FAQ link on any P2P page.
