Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 28th of June 2017 07:18:22 AM

10.3. Fonts and Text

The font property has also picked up a few new values in CSS2:

6.2.6. Bringing It All Together

Just like with the font properties, the background properties can all be brought together in a single shorthand property: background. This property can take a single value from each of the other background properties, in literally any order.


BODY {background-color: white; background-image: url(yinyang.gif);

These values give the font property the ability to match the font family, size, weight, and so forth, according to the settings users have specified on their computers. For example, icons on a Macintosh are typically labeled using 9-point Geneva. Assuming that hasn't been changed by the user, any font declaration with a value of icon will result in 9-point Geneva for that text -- as long as the page is viewed using a Macintosh:

SPAN.OScap {font: icon;}  /* will look like icon labels in OS */

On a Windows system, of course, the font would come out different, and under other window managers (like X), it would look different still. The flexibility is certainly interesting, and it allows the author to easily create pages that have an appearance familiar to the user.

Library Navigation Links

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

1.4.4. Actual Styles

H1 {color: maroon;}BODY {background: yellow;}

After the @import statement in our example, wefind some ordinarystyles. What theymean doesn't actually matter for this discussion, although youcan probably guess that they set H1 elements to bemaroon and BODY elements to have a yellowbackground.

All it takes is three levels of nesting in your tables, and you endup with 6-point text (12 x 0.8 x 0.8 x 0.8 =6.144). Many complicated pages have at least three levels of nesting,and sometimes even more.

Here's a link to the <A HREF="#top">top of 
this page.</A>  (I stuck a hidden anchor tag there:&lt;ANAME="top"&gt; &lt;/a&gt;)
Use anchors to improve navigability, but remember that multiplelinked pages will download quicker than one huge page requiring lots ofanchor tags!
Here's a link to the top of this page.  I stuckstyles, important or otherwise.


:linkIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

This pseudo-class applies tohyperlinks, but not named anchors. It sets the styles to be used fora hyperlink that points to a URI that has not yet been visited (i.e.,is not listed in the browser's history).


>This pseudo-class applies tohyperlinks, but not named anchors. It sets the styles to be used for

Furthermore, even assuming that the background image is initially visible, it always scrolls with the document. Perhaps you don't want to see what Figure 6-54 depicts:

BODY {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: center;}
Figure 6-54

Figure 6-54. Scrolling the background image out of view

Never fear: there is a way to prevent this scrolling.