Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 24th of July 2014 05:25:01 PM

10.6. Borders

In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as border-top-width and border-color, not to mention border itself. CSS2 adds a even more border properties, most of which are aimed at giving the author even more specific control of the borders. Before, it was difficult to set a specific color or style for a given side of the border, except through properties like border-left, and that could require more than one value. The new CSS2 properties address this, and their names are pretty self-explanatory:

border-top-color
border-right-color
border-bottom-color
border-left-color
a lot easier. Obviously, they're left-floating images. The
interesting part will be recreating the way they hang out into the
blank space to the left of the column.

If we just give these pictures the style float: left, they'll be completely contained within the column. However, since the first column has a left margin, all we have to do is give images a negative margin-left, like this:

border-top-style border-right-style border-bottom-style border-left-style


Library Navigation Links

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

background-position: center;}
Figure 6-50

Figure 6-50. Centering with a horizontal repeat

Therefore, setting a large image in the center of theBODY and then letting it repeat will cause it totile in all four directions: up, down, left, andright. The only difference background-positionmakes is in where the tiling starts. Figure 6-51shows the difference between tiling from the center of theBODY, and from its top left corner.

Okay, now that you know how to format text on the page, let's include some in-line images.  The web supports images in GIF, JPEG or PNG formats. GIFs can have up to 256 colors.  JPEGs and PNGs can have millions (although clients' monitors may not display them all). JPEGs use a "lossy" compression that reduces image quality; GIFs and PNGs have lossless compression.  The next chapter covers image editing strategies, etc.  Here we just summarize image placement on the page with the <IMG> tag:
  P {font-weight: 100;} /* assume 'Light' face exists ; see explanation */P STRONG {font-weight: bolder;} /* results in 'normal' text, weight '400' */

Figure 5-10

Figure 5-10. Text trying to be more bold

In the first example, the user agent moves up the weight ladder fromnormal to bold ; in numericterms, this is a jump from 400 to700. In the second example, H1text is already set to bold. If there is no bolderface available, then the user agent sets the weight ofB text within an H1 to