Cascading Style Sheets: The Definitive Guide, Second Edition

URLs

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

url(protocol://server/pathname)

The above 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 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 that contains it is located on the server www.waffles.org or web.pancakes.com.

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:

url(pathname)

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 http://www.waffles.org/syrup.html and that you want the image waffle22.gif to appear on this page. In that case, the URL would be:

pix/waffle22.gif

The above 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 http://www.waffles.org/ equals http://www.waffles.org/pix/waffle22.gif. You can almost always use an absolute URL in place of a relative URL, and it doesn’t matter which you use, as long as they all define valid locations.

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 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 cause the browser to look for the style sheet at http://www.waffles.org/styles/special/toppings.css, not at 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);

Warning

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 is not omitted, the entire declaration will be invalidated and therefore ignored.

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. This value 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 id="toolbar">
<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. All you need to add is 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.