Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 17th of September 2014 07:34:38 PM
up with each other. If we had set the paragraph to have atext-align of center, then thecenters of the line boxes would have lined up, and if it were set tojustify, then each line box would be forced to beas wide as the paragraph's content area. The difference is madeup in letter- and word-spacing, as we see in Figure 8-49.

Figure 8-49

Figure 8-49. Line-box layout with full justification

That pretty well covers how line boxes are generated, at least in thesimplest cases. As we're about to see, however, the inline

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 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.

padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

Example

padding-rightIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the right padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

Example

Well, we talked about a lot of floating behavior, so there's only one more thing to discuss. You won't always want your content to flow past a floated element -- in some cases, you'll specifically want to prevent it.

If you have a document that is grouped into sections, you might not want the floated elements from one section hanging down into the next. In that case, you'd want to set the first element of each section to prohibit floating elements from appearing next to it. If restrictions on floated elements being placed outside their parentelements. Here's the technicality that permits this behavior: aclose reading of the rules listed earlier will show that the outeredges of a floating element must be within the element'sparent. However, negative margins can place the floatedelement's content such that it effectively overlaps its ownouter edge, as detailed in Figure 8-43.

Figure 8-43

Figure 8-43. The details of floating up and left with negative margins

The math in this situation works out something like this: assume the

This gives us our dark green and dark gray hyperlinks.

Now for headings. They're all supposed to be in a sans seriffont, but H1s have some special rules. In order tocover all the bases in a compact manner, we declare:

H1, H2, H3, H4, H5, H6 {font-family: Verdana,sans-serif;}H1 {color: rgb(0%,40%,0%); border-bottom: thin solid; width: 100%;}

With the second declaration, not only do we use the standard color,but we enhance the idea of "underlining" by setting abottom border that will extend from the left edge of the text all the