Wednesday 27th of May 2015 11:26:53 AM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
Chapter 1: HTML and CSS
Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Library Navigation Links

Having done this, we need a style declaration that will recreate the effects of all the tags we just deleted. This should just about do the trick:

.sidebar .head {font-size: larger; font-weight: bold;
text-decoration: underline; color: white;}

By using the contextual selector .sidebar .head, we ensure only those

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

As Figure 7-8 reveals, we have what we wanted. Theorder of the values is obviously important, and follows this pattern:

margin: top right bottom left
Figure 7-8

Figure 7-8. Uneven margins

A good way to remember this pattern is to keep in mind that the fourvalues go clockwise around the element, starting from the top. Thevalues are always applied in this order, so inorder to get the effect you want, you have to arrange the valuescorrectly.

Now let's talk about top and bottom padding. In theory, an inline element with a background color and padding could have the background extend above and below the element. Figure 7-61 gives us some idea of what that might look like. The line height isn't changed, of course, but since padding does extend the background, it should be visible, right?

Here's where the famous phrase returns: "there may be implementation-specific limits." User agents aren't required to support this type of effect.

In the case where there are only two margins to be collapsed, onepositive and the other negative, the situation is handled in a fairlysimple manner. The absolute value of the negative margin issubtracted from the positive margin -- or, to put it another way,the negative is added to the positive -- and the resulting valueis the distance between the elements.

To see what this means, let's start with a paragraph that has anegative top margin and no margins on its other sides -- this willkeep the example simple. In addition, we'll make the paragraphA:active {color: silver;} A:visited {color: #333333;} /* a very dark gray */

Figure 6-4

Figure 6-4. Changing colors of hyperlinks

This sets all anchors with the class external (<A CLASS="external" HREF="...">) to be silver, instead of medium gray. They'll still be a dark gray once they've been visited, of course, unless you add a special rule for that as well:

BODY {color: black;}