URLs (Cascading Style Sheets: The Definitive Guide)

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 @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.