Section 4.5. URLs

4.5. URLs

If you've written web pages, you're obviously familiar with URLs (or, in CSS2.1, URIs). Whenever you need to refer to oneas in the @import statement, which is used when importing an external style sheetthe general format is:


This example defines what is known as an absolute URL. By absolute, I mean a URL that will work no matter where (or rather, in what page) it's found, because it defines an absolute location in web space. Let's say that you 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 that contains it is located on the server or

The other type of URL is a relative URL, so named because it 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 works only if the image is on the same server as the page that contains the URL. For argument's sake, assume that you have a web page located at and that you want the image waffle22.gif to appear on this page. In that case, the URL would be:


This path works because the web browser knows that it should start with the place it found the web document and then add the relative URL. In this case, the pathname pix/waffle22.gif added to the server name equals You can almost always use an absolute URL in place of a relative URL; it doesn't matter which you use, as long as it defines a valid location.

In CSS, relative URLs are relative to the style sheet itself, not to the HTML document that uses the style sheet. 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, it must 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"     href=""> 

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

 @import url(special/toppings.css); 

This @import will cause the browser to look for the style sheet at, not at If you have a style sheet at the latter location, then the @import in basic.css should read:

 @import url(; 

Netscape Navigator 4 interprets relative URLs in relation to the HTML document, not the style sheet. If you have a lot of NN4.x visitors or want to make sure NN4.x can find all of your style sheets and background images, it's generally easiest to make all of your URLs absolute, since Navigator handles those correctly.

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

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

If the space isn't omitted, the entire declaration will be invalidated and thus ignored.

4.5.1. Keywords

For those times when a value needs to be described with a word of some kind, there are keywords. A very common example is the keyword none, which is distinct from 0 (zero). Thus, to remove the underline from links in an HTML document, you would write:

 a:link, a:visited {text-decoration: none;} 

Similarly, if you want to force underlines on the links, then you would use the keyword underline.

If a property accepts keywords, then its keywords will be defined only for the scope of that property. If two properties use the same word as a keyword, the behavior of the keyword for one property will not be shared with the other. As an example, normal, as defined for letter-spacing, means something very different than the normal defined for font-style. inherit

There is one keyword that is shared by all properties in CSS2.1: inherit. inherit makes the value of a property the same as the value of its parent element. In most cases, you don't need to specify inheritance, since most properties inherit naturally; however, inherit can still be very useful.

For example, consider the following styles and markup:

 #toolbar {background: blue; color: white;} <div > <a href="one.html">One</a> | <a href="two.html">Two</a> | <a href="three.html">Three</a> </div> 

The div itself will have a blue background and a white foreground, but the links will be styled according to the browser's preference settings. They'll most likely end up as blue text on a blue background, with white vertical bars between them.

You could write a rule that explicitly sets the links in the "toolbar" to be white, but you can make things a little more robust by using inherit. You simply add the following rule to the style sheet:

 #toolbar a {color: inherit;} 

This will cause the links to use the inherited value of color in place of the user agent's default styles. Ordinarily, directly assigned styles override inherited styles, but inherit can reverse that behavior.

CSS(c) The Definitive Guide
CSS: The Definitive Guide
ISBN: 0596527330
EAN: 2147483647
Year: 2007
Pages: 130
Authors: Eric A. Meyer

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: