Absolute =
protocol +
FQDN (fully qualified domain name) +
directories (optional) +
file name.
Protocol = http://
(hxxp:// has been used in examples below, to prevent auto-linking URLs)
FQDN =
www.digitalFAQ.com (for example)
directories = /images/
(for example)
file name = butterflies.jpg
"Non-absolute" = relative, as in relative to your current location.
At my home, the "next door neighbor" is John (left) and Bob (right). If I went to Bob's house, "next door neighbor" is different.
hxxp://www.digitalFAQ.com/images/butterflies.jpg = absolute. It always pulls the image from that location.
Now consider this scenario...
hxxp://www.digitalFAQ.com/
reviews/page1.html
hxxp://www.digitalFAQ.com/
images/page2.html
hxxp://www.digitalFAQ.com/
guides/page3.html
Three pages that are in different folders. Note that one is in "images".
If I href'd "
butterflies.jpg" instead of "
http://www.digitalFAQ.com/images/butterflies.jpg" then only
page2.html would show the image, as it's in the same folder. In order for the image to show in the other pages, I'd have to either (1) make copies of butterflies.jpg in the other folders, which is not a good idea, or (2) fix the path to absolute, so that any page can load it, or (3) create
relative paths.
The only drawback of absolute is that it requires DNS calls, even when developing a site offline. (Although it should be noted that you can setup a local DNS to the computer.) A "DNS call" means that digitalFAQ.com must be a website that the computer can connect to, using a nameserver (local or remote, it doesn't matter). If the computer cannot reach digitalFAQ.com, then it cannot load that absolute path image.
A proper
relative path would look like this:
<a href="../images/butterflies.jpg">
The ".." (two periods, side by side) means "go back one folder".
If hxxp://www.digitalFAQ.com/guides/folder1/page3.html was the page, then it would be
<a href="../../images/butterflies.jpg">
If hxxp://www.digitalFAQ.com/guides/folder1/folder2/page3.html was the page, then it would be
<a href="../../../images/butterflies.jpg">
But that makes the code somewhat "spaghetti", too. So absolutes are a favorite of developers, with only minor use of relative coding. Most developers use a mix of absolute and relative, and base decisions with forward thinking on what may or may not change in the future.
Does that clear it up?
While I have mentioned the path for a .jpg image, the same applies to .css files.
Also, the stylesheet file must be named ".css" in order for the server to acknowledge the MIME type and load a file. It must be "stylesheet-filename.css" and not just "stylesheet-filename". That's not valid a MIME (technically having no MIME) for loading a CSS document in a browser. "MIME" is a technical way to say the computer understands what the file is supposed to be, what kind of data it contains.