Introduction

We have not learned to design the Web.

This is not to say that we haven’t done some profound work when it comes to web design, usability, technological progress, and innovation. But to get to this point in the web’s history, we’ve had to borrow guidelines from other media, hack and workaround our way through browser inconsistencies, and bend markup so far out of its normal shape that we’ve nearly broken it.

CSS has been around for a long time, but the main problem has not been with CSS, rather, it’s been browser support problems for CSS. But with the release of Netscape 6.x browsers and the prevalence of IE browsers, along with somewhat less common but CSS-savvy browsers such as Opera, we can now begin to turn to CSS for at least some of our design concerns.

As a result of the growing proliferation of browsers on the Web that can support CSS, web designers and developers will be seriously challenged to begin looking at web design in new ways. The bad news is that those with little experience in CSS will have to learn how to write a whole new language!

The good news, however, is that it’s not that difficult a language to learn if you’ve been working with HTML for some time. And there’s more good news, because once you’ve learned to employ CSS in your site designs, you’ll find that you are left with a lot less work and a lot less document overhead, such as numerous font tags and graphic image spacers. Your documents will be cleaner, much easier to manage, and load and render much more quickly as a result.

Philosopher Bertrand Russell said, “War does not determine who is right—only who is left.” For web designers and developers, it’s browser wars that have made our lives very difficult. Those difficulties have sent some less committed web workers running into the night. Those of us who are left must find our way to steadier ground.

If we seek innovation in design, we must look first to the web browser, for it is within the web browser that our visual designs are rendered. We must also look at our practices with HTML and XHTML. The heart of the information regarding how web browsers and web authors should ideally be practicing lies under the auspices of the World Wide Web Consortium (W3C), www.w3.org/. Known as recommendations or specifications and sometimes referred to as standards, HTML, XHTML, CSS, and many other languages and methodologies are being developed by the W3C with very clear guidelines as to how to use them.

Fortunately, there’s been enough discussion over the past years of the importance of using W3C recommendations and specifications as de facto web standards. Many browser manufacturers, web authors, and tools manufacturers are starting to pay detailed attention to getting on with creating a consistent means for web authors to achieve consistent results across browsers.

For those web authors working in today’s transitional time, several ideas that exist in markup are coming to the forefront as a concern. The primary issue in terms of CSS is first described in HTML 4, which asks for a separation of presentation and document formatting ideally, and demands it in its most strict interpretation. This means reserving CSS for design and reserving the document for the more straightforward structuring of content.

But web documents have not been historically developed that way. Instead, we have developed and learned to rely on presentational elements and attributes for alignment, color, size, and so on. This is the most common practice in use on the Web today, but that will ideally change as the rationale and implementation for CSS grows.

We have not yet learned to design the Web. It’s going to be the people using CSS in the next few years who will come up with the innovative design ideas we need to help drive the potential of the Web in general. It is my hope that this book will help you to become one of those innovators, and I wait with enthusiasm to hear about the successes from those readers who use the techniques described here to design their sites.

About the Book

CSS: The Designer’s Edge effectively teaches web designers and developers to properly structure documents and use CSS as an empowering design technology. The topic is taught in a linear way, covering main concepts in markup and CSS in depth, with plenty of visual images to aid in the visualization of how CSS works.

The ideal reader for this book:

• Has a working knowledge of HTML

• Wants to work with CSS for presentation

• May already work with CSS but needs a stronger foundation to work effectively

• Is committed to understanding the languages of the Web in order to use them properly

• Is interested in strengthening skills to be more innovative with CSS design

Where CSS: The Designer’s Edge differs from other books on CSS is that it is a clearly written book that instructs the reader carefully regarding the detailed technical, creative, and inspirational needs of today’s working web professional.

How the Book Is Structured

CSS: The Designer’s Edge has three parts, each containing three chapters. Part I, “Technology,” teaches structured markup and CSS in detail as languages. This provides the foundation for the designer who seeks to use CSS in complex and important ways. Part II, “Design,” digs deep into the primary uses of CSS: typography, color, and page layout. Part III, “Vision,” provides insights from working websites developed with structured markup and CSS, helping readers gain a deep perspective of how the markup and CSS are interacting to provide refreshing designs that also adhere to contemporary specifications.

 W W W.  Along the way, you’ll find notes, tips, and sidebars that add insight, perspective, and provide additional resources to help you go beyond the scope of the material contained within the book itself. When you see a symbol like this one in the margin, you’ll know you can go and download the code from www.sybex.com. (Navigate to the book’s page, click the Download link, and follow the directions that appear.)