Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 31st of March 2015 05:15:52 AM

Preface

The subject of this book is, as you might have guessed by the cover, Cascading Style Sheets (CSS). There are two "levels" to CSS; these are referred to as CSS1 and CSS2. The difference between the two is that CSS2 is all of CSS1, plus a lot more. This book attempts to cover all of CSS1, and CSS positioning, which is a part of CSS2. The rest of CSS2 is excluded because, at the time of this writing, nobody had implemented most of it. Rather than cover a lot of theoretical territory, we chose to stick to what was currently usable.

If you are a web designer or document author interested in sophisticated page styling, improved accessibility, and saving time and effort, then this book is for you. All you really need before starting the book is a decent knowledge of HTML 4.0. The better you takes effect. So if you want H1 elements to have thin, black top and bottom borders with thick, gray side borders, and medium, gray borders around P elements, this will suffice, as we can see in Figure 7-42:

H1 {border-style: solid; border-width: thin thick; border-color: black gray;}
P {border-style: solid; border-color: gray;}
Figure 7-42

Figure 7-42. Borders have many aspects

By default, a single color value will be applied to all four sides, as with the paragraph in the previous example. On the other hand, if know HTML, of course, the better prepared you'll be. You will need to know very little else in order to follow this book.

It is important to remember something about web standards and books: the former are continually evolving, while the latter are frozen in time (until the next edition comes out, anyway). In the case of HTML and CSS, there are a great many changes afoot even as these words are being written. The recent formalization of XHTML 1.0 as a full W3C Recommendation, for example, is a major milestone in the evolution of the World Wide Web. There are likely to be even more levels to CSS, further extending the ability to style documents; major web browsers are approaching full CSS1 support, and robust CSS2 implementations can be seen lurking on the horizon. This is an exciting time to be a designer, and learning CSS now will give you a leg up on the future.

0.1. Typographical Conventions

The following typographical conventions are used in this book:

Constant width

is used to indicate code examples, HTML tags and CSS elements.

Constant width italic

is used for replaceables that appear in text.

Italic

is used to introduce new terms and to indicate URLs, filenames, and pathnames.

TIP

indicates a note or tip relating to the nearby text.

WARNING

indicates a warning.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

with a background color, but the background won't extend intothe padding unless you get very sneaky. You need to add a border, aswas discussed earlier in "Margins: Known Issues."Therefore, if you have a background color, some padding, and a borderset for an element, you'll see the background fill the contentarea and the padding as requested, but a transparent space willincorrectly appear between the two, as shown in Figure 7-62.

Figure 7-62

Figure 7-62. Padding problems in Navigator 4

This may be an interesting effect, but it isn't permissible

Well, don't change that thinking when you're using CSS.If you use CSS to set the color of all hyperlinks (both visited andunvisited) to be blue, then that's whatthey'll be. In the same way, if you use styles to set thebackground of a page to be green, then the entirepage background will be the same shade of green throughout the entiredocument. If you set the background of H1 elementsto be navy, then the whole background of everyH1 will be the same dark blue color.

style sheets (Internet Explorer for Macintosh) will not apply the styles from any LINK element with a REL of alternate stylesheet unless that style sheet is selected by the user.

1.4.2. The STYLE Element

Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of the document, half as wide as the document's width and overwriting the first few elements!

In addition, if the document is scrolled, the paragraph will scroll right along with it. This is because the element's containing block is the BODY element's content area, not the viewport. If you want to position elements so that they're placed relative to the viewport and don't scroll