Sunday 25th of February 2018 10:36:20 PM

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
Preface
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
instead of 100%. Accordingly, the values in Table 3-2 correspond to our usual list of colors.

Table 3-2. Numeric RGB Equivalents for Common Colors

As expected, any value outside the range of-255 is clipped, just as with percentages -- although in thiscase, of course, the values are clipped to 0 and255:

H1 {color: rgb(0,0,0);}                /* black */H2 {color: rgb(127,127,127);}          /* gray */
Appendix D: CSS Support Chart
Index
Colophon
Library Navigation Links

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

Figure 7-9 shows us, with a little extra annotation, the results of this declaration.

7.3.2. Percentages and Margins

As stated earlier, it's possible to set percentage values for the margins of an element. Percentages are computed in relation to the width of the parent element, so they change if the parent element's width changes in some way. For example, assume the following, shown in Figure 7-10:

Incidentally, the result, shown in Figure 6-37, would have been exactly the same had the position been declared as right top. When using the position keywords, they can appear in any order, so long as there are no more than two of them, one for the horizontal and the other for the vertical.

Figure 6-37

Figure 6-37. Placing the background image in the top right corner of the browser window

If only one keyword appears, then the other is assumed to be center. Table 6-1 shows

Now all we need is the style .navbar {background: green;} and we're set. Or are we?

Not quite, no. In the old page, the navigation bar was separated slightly from the main display, but ran right up against the sidebar, thereby creating a sort of inverted green "L" shape. We want to make sure that this is still the case in the new setup. This is most easily accomplished by making sure that the division has no padding or border set, and that it is guaranteed to be as wide as the table to Figure 7-54 to see what happens when an inline element with a border is displayed across multiple lines:

B {border: 3px solid gray; background: silver;}
Figure 7-54

Figure 7-54. An inline element with a border displayed across multiple lines of text

In Figure 7-54, the left border is applied to the beginning of the element, and the right border to the end of it. Borders are not necessarily applied in this fashion; they can also be applied to the right and left side of each line in the element, if the situation seems to demand it. For

Now, finally, the last method. Again, let's look at an example and then explain it:

H1 {color: #000;}   /* set H1s to be black */
H2 {color: #666;}   /* set H2s to be dark gray */
H3 {color: #FFF;}   /* set H3s to be white */

As you can see from the markup, there are only three digits in each color value. However, since hexadecimal numbers between 00 and FF need two digits each,