Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 31st of October 2014 01:40:02 PM


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.


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


indicates a note or tip relating to the nearby text.


indicates a warning.

The results of this are shown in Figure 8-61. Bysetting a line-height for theBIG element, the overall height of the line boxhas been increased, thus providing enough room for theBIG element to be displayed without overlappingany other text and without changing theline-height of all lines in the paragraph. We usea value 1em so that theline-height for the BIG elementwill be set to the same size as BIG's

Library Navigation Links

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

But making extra space with multiple P tags doesn't work 

Use multiple BR tags, or insert special non-breaking space charactersbetween P tags instead:

You can include a BASEFONT tag at the start of your BODY section tospecify the font SIZE, and, for some browsers, font FACE and font COLORfor your page: values move the top edge of the positioned elementdownward, while negative values move itabove the top of its containing block.Similarly, left describes how far to the right (forpositive values) or left (for negative values) the outer left edge ofthe positioned element is from the left edge of its containing block.Another way to look at it is that positive values cause inwardoffsets, moving the edges toward the center of the containing block,and negative values cause outward offsets.

Figure 8-60

Figure 8-60. Inline margins and line-box layout

8.4.3. Managing the Line Height of Inline Elements

In the previous section, we had a fewcases where changing the line-height of an inlineelement led to the possibility of text from one line overlappinganother. In each case, though, the changes were made on individualelements. So how can we affect the line-height of you might expect, lighter works in just the sameway, except that it causes the user agent to move down the weightscale, instead of up. With a quick modification of the previousexample, we can see this very clearly:

/*   assume only two faces for this example: 'Regular' and 'Bold'   */P {font-weight: 900;}   /* as bold as possible, which will look 'bold' */P SPAN {font-weight: 700;}   /* this will also be bold */STRONG {font-weight: lighter;}   /* lighter than its parent */B {font-weight: lighter;}   /*lighter still */