Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:09 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:

url(http://server/pathname)

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 www.waffles.org. 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 http://www.waffles.org/pix/waffle22.gif. This URL is valid no matter where it is found, whether the page is on the server www.waffles.org or web.pancakes.com.

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:

url(pathname)

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 http://www.waffles.org/syrup.html 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 http://www.waffles.org/ added to the pathname pix/waffles22.gif equals http://www.waffles.org/pix/waffle22.gif.

Here are two more examples:

@import url(http://css1.style.org/example.css);
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 http://www.waffles.org/toppings/tips.html, which has a LINK to the style sheet http://www.waffles.org/styles/basic.css:

<LINK REL="stylesheet" TYPE="text/css"
HREF="http://www.waffles.org/styles/basic.css">

Inside the file basic.css is an <BODY LINK="blue"VLINK="blue">, you probably expect that allhyperlinks will be the same shade of blue, no matter where they arein the document.

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 entire @import statement referring to another style sheet:

@import url(special/toppings.css);

This @import will load the file http://www.waffles.org/styles/special/toppings.css, not http://www.waffles.org/toppings/special/toppings.css. If you have a style sheet at the latter location, then the @import in basic.css should read:

@import url(http://www.waffles.org/toppings/special/toppings.css);

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.

Includesare described in much greater detail in Web Design in aNutshell, by Jennifer Niederst, and Apache: TheDefinitive Guide, by Ben Laurie and Peter Laurie, bothpublished by O'Reilly and Associates.