Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of April 2018 04:37:36 PM

Copyright © 2000 O'Reilly & Associates, Inc. All rights reserved.

Printed in the United States of America.

Published by O'Reilly & Associates, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly & Associates, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O'Reilly & Associates, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. The association between the image of a koala and the topic of HTML and XHTML is a trademark of O'Reilly & Associates, Inc.

While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

Figure 7-37

Figure 7-37. Margins, backgrounds, and borders

The border's width is, by default, medium ,as we can see in Figure 7-37. We can change that tothe result in Figure 7-38 as follows:

P {margin: 5px; background-color: silver;border-style: solid; border-width: thick;}
Figure 7-38

Figure 7-38. Changing the width of the border

This can be taken to fairly ridiculous extremes, such as setting20-pixel borders as depicted in Figure 7-39:

Library Navigation Links

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

border-style: solid; border-width: 20px;}
Figure 7-39

Figure 7-39. Inflating the border width to unhealthy levels

This is all as expected: the style and width combine to create aborder whose color is based on the foreground color of the element.

It's also possible to setwidths for individual sides. This is donein two familiar ways. The first is to use any of the specificproperties mentioned at the beginning of the section, such asborder-bottom-width. The other way is to use valuerepeat-x:

BODY {background-image: url(yinyang.gif);
background-repeat: repeat-x;}

Now the image is repeated along the x-axis (in other words, horizontally), as illustrated in Figure 6-31.

Figure 6-31

Figure 6-31. Tiling along the horizontal axis

Finally, of course, we may wish not to repeat the background image at all. In that case, we use the last value,