Reading this Book

For the most part, the text, tables, figures, code, and examples should be self-explanatory. But you need to know a few things to understand this book.

CSS Value Tables

In Part 1, each section that explains a CSS property includes a table for quick reference with the different values the property can use, as well as the browsers and CSS levels with which those values are compatible (Figure i.2). The Compatibility column displays the first browser version that supported the value type. Table i.5 lists the browser abbreviations used in this book. Keep in mind, though, that even if the value is available in a particular version of the browser, it may not be available for all operating systems. The support Web site (webbedenvironments.com) has tables that show in which operating systems values work and whether there are any problems.

Table i.5. Browser Abbreviations

ABBREVIATION	BROWSER
IE6	Internet Explorer 6
IE7	Internet Explorer 7
FF1[*]	Firefox 1
FF1.5[*]	Firefox 1.5
FF2[*]	Firefox 2
O7	Opera 7
O8	Opera 8
O9	Opera 9
S1	Safari 1
S1.5	Safari 1.5
S2	Safari 2

^[*] Includes other Mozilla based browsers: Camino and Flockn

Figure i.2. The property tables in Part 1 of this book show you the values available with a property, the earliest browser version in which the value is available, and with which version of CSS the value was introduced.

The Code

For clarity and precision, this book uses several layout techniques to help you see the difference between the text of the book and the code.

Code looks like this:

<style> p { font-size: 12pt; }  </style>

All code in this book is presented in lower-case (see the sidebar "Uppercase or Lowercase Tags" in Chapter 1). In addition, quotes in the code always appear as straight quotes (" or '), not curly quotes (" or '). There is a good reason for this distinction: Curly quotes (also called smart quotes) will cause the code to fail.

When you type a line of code, the computer can run the line as long as needed, but in this book, lines of code have to be broken to make them fit on the page. When that happens, you'll see a gray arrow , indicating that the line of code is continued from above, like this:

[View full width]
.title { font: bold 28pt/26pt times, serif; color: #FFF; background-color: #000;  background-image: url(bg_ title.gif); }

Production: please add arrows above.

I often begin a numbered step with a line of code in red from the main code block. This is intended as a reference to help you pinpoint where that step applies in the larger code block that accompanies the task. This code will then be highlighted in red in the code listing to help you more easily identify it.

HTML or XHTML?

The Web is currently undergoing a metamorphosis behind the scenes, as the markup language used to create Web pages migrates from HTML to XHTML. Although very similar in their syntax, XHTML is much less lenient with errors.

For this book, I use XHTML as the markup language. For more details, see "CSS and Markup Languages" in Chapter 1.