Book Home Sunday 28th of August 2016 12:08:06 AM Cascading Style Sheets: The Definitive GuideSearch this book

Full Text Search

If you are having difficulty searching, or if you have not used this search utility before, please read this.


Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

After all, individual letters aren't that large!

A.grid {background-image: url(smallgrid.gif);}<P>This paragraph contains <A HREF="..." CLASS="grid">an anchor with abackground image</A> which is tiled only within the anchor.</P>
Figure 6-24

Figure 6-24. A background image on an inline element

There are a number of ways to employ this technique. You might placean image in the background of STRONG elements, inorder to make them stand out more. You could fill in the backgroundof headings with a wavy pattern, or with little dots. You can even won't be able to make any sense of SPAN as apiece of document structure. On the other hand, usingSPAN avoids having to cope with a number of bugsin early CSS implementations, so I've chosen to useSPAN in this case study instead of something alittle more structured.

Having done this, we need a style declaration that will recreate theeffects of all the tags we just deleted. This should just about do accepts as a value any valid color, as discussed in Chapter 3, "Units and Values", such as #FFCC00 orrgb(100%,80%,0%). It has the effect of setting thecolor of the text in the element, as shown in Figure 6-1:

<P STYLE="color: gray;">This paragraph has a gray foreground.</P><P>This paragraph has the default foreground.</P>
Figure 6-1

Figure 6-1. Declared color versus default color

TIP

In Figure 6-1, the default foreground color isblack. That doesn't have to be the case, since users might haveputting anything where the bullet would ordinarily be, although itdoes not interrupt the counting in ordered lists. Thus, the followingmarkup would have the result shown in Figure 7-80:

OL LI {list-style-type: decimal;}LI.off {list-style-type: none;}<OL><LI>Item the first<LI CLASS="off">Item the second<LI>Item the third

/*   assume only two faces for this example: 'Regular' and 'Bold'   */P {font-weight: 100;}   /* looks the same as 'normal' text */P SPAN {font-weight: bolder;}   /* maps to '700' */

As we can see, the weight 100 is assigned to thenormal font face, but the value offont-weight is still 100. Thus,the SPAN text (which is set to bebolder) will inherit the value of100 and then evaluate to the next-heaviest face,<TD CLASS="write"><A HREF="write.html">Contact Me</A></TD> </TR> </TABLE>

Then, on each page, we simply write an appropriate style. If the highlighted link should have a yellow background, then on the "Other Links" page, we would add this to the style sheet, leading to the result depicted in Figure 11-20:

TD.links {background: yellow;}
Figure 11-20

Figure 11-20. Highlighting the current page