However, the specification doesn't say whether one of the linesshould be thicker than the other, or if they should be the samewidth, or if the space should be thicker or thinner than the lines.All of these things are left up to the user agent to decide.

All of the borders shown in Figure 7-30 are based ona color of gray, which makes all of the effectseasier to see. The look of a border style is always based in some wayon the color of the border, although the exact method may vary Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of April 2018 04:42:42 PM

3.4. URLs

If you've written web pages, then you're familiar with URLs. URLs aren't often used in style sheets, but if you do need to refer to one -- as in the @import statement, which is used when importing an external style sheet -- then the general format is:


This example defines an absolute URL. By absolute, we mean a URL that will work no matter what page it's found in, because it defines an absolute location in web space. Let's say that we have a server called On that server, there is a directory called pix, and in this directory is an image waffle22.gif. In this case, the absolute URL of that image would be This URL is valid no matter where it is found, whether the page is on the server or

The other type of URL is a relative URL, so named because this type of URL specifies a location that is relative to the document that uses it. If you're referring to a relative location, such as a file in the same directory as your web page, then the general format is:


This only works if the image is on the same server as the page that contains the URL. For argument's sake, we'll assume that we have a web page located at and that we want the image waffle.gif to appear on this page. In that case, the relative URL could be pix/waffle22.gif.

This works because the web browser knows that it should take the same place it found the web document and add the relative URL to it. In this case, the server name added to the pathname pix/waffles22.gif equals

Here are two more examples:

@import url(;
BODY {background-image: url(hatch.gif);}

It doesn't really matter whether you use absolute or relative URLs, so long as they define valid locations. You can use whichever is easier for you and your project.

Another thing you need to watch out for is that relative URLs are relative to the style sheet, not the HTML document. For example, you may have an external style sheet that imports another style sheet. If you use a relative URL to import the second style sheet, then it has to be relative to the first style sheet. As an example, consider an HTML document at, which has a LINK to the style sheet

<LINK REL="stylesheet" TYPE="text/css"

Inside the file basic.css is an @import statement referring to another style sheet:

@import url(special/toppings.css);

This @import will load the file, not If you have a style sheet at the latter location, then the @import in basic.css should read:

@import url(;

In other words, use an absolute URL.

This might be a good idea in any case. As it happens, Navigator 4 interprets relative URLs in relation to the HTML document, not the style sheet. Yes, this is wrong, but that's how Navigator 4 does things. Therefore, it's generally easiest if you make all of your URLs absolute, since Navigator does at least handle those correctly.

Note that there cannot be a space between the url and the opening parenthesis. Thus:

BODY {background: url(http://www.pix.web/picture1.jpg);}      /* correct */
BODY {background: url (images/picture2.jpg);}                 /* INCORRECT */

If the space is included, the entire rule will be invalidated, and therefore ignored.

Library Navigation Links

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

Figure 8-48

Figure 8-48. Line-box layout with right justification

Again, all we have here are the pieces of a single line of text which have been stacked on top of one another with their right sides lined up with each other. If we had set the paragraph to have a text-align of center, then the centers of the line boxes would have lined up, and if it were set to justify, then each line box would be forced to be as wide as the paragraph's content area. The difference is made up in letter- and word-spacing, as we see in Figure 8-49.

Figure 8-62

Figure 8-62. Inline borders can be overlapped

One solution is to increase the line-height of the paragraph. This will affect every line in the entire element, not just the line in which the bordered hyperlink appears:

A:link {border: 5px solid blue;}
P {font-size: 14px; line-height: 24px;}

Because there is extra space added above and below each line, the border around the hyperlink doesn't impinge on any other line, as we can see in Figure 8-63.