Tuesday 25th of October 2016 08:35:04 AM

Well, don't change that thinking when you're using CSS.If you use CSS to set the color of all hyperlinks (both visited andunvisited) to be blue, then that's whatthey'll be. In the same way, if you use styles to set thebackground of a page to be green, then the entirepage background will be the same shade of green throughout the entiredocument. If you set the background of H1 elementsto be navy, then the whole background of every src="../gifs/smbanns.gif" usemap="#banner-map" border=0 alt="Book Home" >

Cascading Style Sheets: The Definitive GuideSearch this book


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

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

and Opera 3.5 and later) honor negative background positions, the effects are wildly unpredictable at best. This applies even to negative lengths, which can cause unwanted tiling, inappropriate positioning of the background images, and more. If you really need to set a single background image so that it's hanging off the page, you're probably better off producing an image that is already cut off and just putting it in the top left corner.

Throughout this section, every example has had a repeat value of

Figure 7-60

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of the boldfaced text. There's your padding.

This all seems familiar enough, even when the boldfaced text stretches across multiple lines. Turn to Figure 7-61 to see what happens with padding set on an inline element displayed across multiple lines:

B {padding: 10px; background: silver;}
which means that if you don't declare a value, then by default, there won't be a margin.


In practice, browsers come with pre-assigned styles for many elements, and margins are no exception. For example, in CSS-enabled browsers, the "blank line" above and below each paragraph element is generated using margins. Therefore, if you don't declare margins for the P element, the browser may apply some margins on its own -- which is to say that just becausevalue of color can also affect the borders around an element. Let's assume that you've declared these styles, which have the result shown in Figure 6-6:

P.aside {color: gray; border-style: solid;}
Figure 6-6

Figure 6-6. Border colors are taken from the content's color

This will result in the element <P CLASS="aside"> having gray text and a gray medium-width solid border. That's because the foreground color is applied to the borders by default. The basic way to override thatand unpredictable placement on the page.  If you resize the browser window the image jumps around as the lines re-wrap.  In this case, the image is in the same directory as this HTML file, but you could reference an image in another directory by its relative or absolute path.  You can even specify the URL for an image located on another server, which is more honest than stealing a copy but makes your page depend on the other server remaining operational.