Monday 27th of March 2017 12:41:49 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

If there are less than four values, value replication 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;}

Library Navigation Links

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

hexadecimal and RGB values.

P {border-style: solid; border-width: thick;
border-color: black rgb(25%,25%,25%) #808080 silver;}

Figure 7-43 shows us varying shades of gray for borders. Thanks to the grayscale nature of this book, I've been sticking mostly to shades of gray, but any color could be used. If you wanted an H1 with a red, green, blue, and yellow border, it's this easy:

switch from being italic to oblique depending on the actual size of the font. The display of Times on a Macintosh, for example, is as shown in Figure 5-27, and the only difference there is a single point in size.

Figure 5-27

Figure 5-27. Same font, same style, different sizes

There isn't much that can be done about this, unfortunately, save better font handling by operating systems. Usually, the italic and oblique fonts look exactly the same in web browsers.

50px or 2cm , and finally,percentage values. Each type of value has a slightly different effecton the placement of the background image. Keywords

Easiest to understand are thekeywords. They have the effects you'd expect from their names;for example, top right wouldcause the background image to be placed in the top right corner of

/* file 'link-styles.css' */        /* file 'import-styles.css' */H1 {margin-bottom: 0;}              H1 {margin-bottom: 0;}P {margin-top: -1em;}               P {margin-top: 0;}<LINK REL="stylesheet" TYPE="text/css" HREF="link-styles.css"TITLE="Linked"><STYLE TYPE="text/css">@import url(import-styles.css);</STYLE>

Because Explorer will read in both style sheets, it will use the