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

Get Cascading Style Sheets: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.