Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of April 2018 04:39:54 PM
PreviousCascading Style Sheets: The Definitive GuideNext

6.3. Summary

Setting colors and backgrounds on elements gives authors a great deal of power in CSS. The advantage of CSS over traditional methods is that colors and backgrounds can be applied to any element in a document -- not just table cells, for example, or anything enclosed in a FONT tag. Despite a few bugs in some implementations, like Navigator 4's reluctance to apply a background to the entire content area of an element, these are very widely used properties. Their popularity isn't too hard to understand, either, since color is one easy way to distinguish the look of one page from another.

CSS allows for a great deal more in the way of element styling, however: borders that can be placed on any element, extra margins and padding, and even a way to "float" elements other than images. These are all covered in the next chapter.

PreviousHomeNext
6.2. Complex BackgroundsBook Index7. Boxes and Borders
placed halfway across the containing block. This is its offset fromthe left edge of the containing block. The outer right edge of thepositioned element, however, is not offset from the right edge of thecontaining block, so the two are coincident. Similar reasoning holdstrue for the top and bottom of the positioned element: the outer topedge is placed halfway down the containing block, but the outerbottom edge is not moved up from the bottom. This leads towhat's shown in Figure 9-2.

TIP

Library Navigation Links

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

let's say you want a triple border on the left side of each H1 element in your document. You could then declare the following: 

H1 {background-image: url(triplebor.gif); background-repeat: repeat-y;}

As we can see in Figure 6-34, the very small image triplebor.gif is repeated vertically along the left side of the heading element, resulting in an effect that isn't otherwise possible.

Figure 6-34

Figure 6-34. Creating a "triple border" on H2 elements

The University of Delaware <A HREF="http://www.udel.edu/FREC/spatlab/">
Spatial Analysis Lab</A>, is a proud sponsor of this website.  The animated GIF image is also a link.  By default, a linked image has a 2-pixel wide blue border, but I suppressed that with the BORDER=0 attribute in the IMG tag. <A HREF="http://www.udel.edu/FREC/spatlab/">
<IMG ALIGN=RIGHT HEIGHT=42 WIDTH=39 HSPACE=5 VSPACE=5 BORDER=0 SRC="tinyearth.gif"></A> The University of Delaware Spatial sides, it's this easy, as the result shown in Figure 7-56 makes clear:

H1 {padding: 10px; background-color: silver;}
Figure 7-56

Figure 7-56. Padding applied to an H1 element

On the other hand, we might want H1 elements tohave uneven padding and H2 elements to have regular padding, as shownin Figure 7-57:

H1 {padding: 10px 0.25em 3ex 3cm;} /* uneven padding */H2 {padding: 0.5em 2em;} /* values replicate to the bottom and left sides */
shown in Figure 7-84.

Figure 7-84

Figure 7-84. Switching off image bullets in sublists

WARNING

Remember that this may not be true in the real world: a user agentmay have already defined a list-style-type forUL UL, so the value ofsquare won't be inherited after all. Yourbrowser may vary.

H1 {border-style: solid; border-color: red green blue yellow;}
Figure 7-43

Figure 7-43. One border, many colors

As previously discussed, if no colors are defined, then the default color is the foreground color of the element. Thus, the following declaration will be displayed as shown in Figure 7-44: 

P.shade1 {border-style: solid; border-width: thick; color: gray;}
P.shade2 {border-style: solid; border-width: thick; color: gray;
border-color: black;}