Y'know, I just got through searching for a moderator to point out a typo in the first post, and then I caught the typo in my own. A file does not have to be loaded loaded twice :(
There are three kinds of links:
relative links stylesheet.css
../stylesheet.css
or, for that matter,
../../../styles/stylesheet.css
These forms are interpreted by the browser (or by any other program, such as a text editor, that has "web preview" functionality). Assuming your html document is
/dir1/dir2/dir3/dir4/filename.html
then the three links above would mean
/dir1/dir2/dir3/dir4/stylesheet.css
/dir1/dir2/dir3/stylesheet.css
/dir1/styles/stylesheet.css
absolute links: http://www.example.com/styles/stylesheet.css
That form means what it looks like: "go out on the internet and find this URL". You'd never use it for links to supporting files on your own site.
OK, almost never. site-relative or site-absolute (I've seen both forms and they mean the same thing)
/styles/stylesheet.css
This form only works on a server. Well, theoretically it would work on your local computer-- but only if you kept your files at the very top level of some directory (details depend on your operating system). On a server, it means
example.com/styles/stylesheet.css
no matter where the original html file is located. That's the magic of the leading slash. Use this form for files that don't move, for cross-directory links on your site, and for all links in error documents.
For this form to work on your local machine, you need to install a pseudo-server like MAMP, WAMP or, uhm, I forget what it's called in Linux but something tells me you're not a Linux person so that's OK. There are free forms of each one and they're easy to use. You can then make a local copy of your site that will look and behave
exactly like the real thing, including
haha server-side includes, php, htaccess (assuming Apache) and everything else you want. You probably won't do this if you have an ecommerce site with thousands of pages, but for anything smaller it's invaluable.