The Need to Organize Site Files
A common mistake committed by novice web designers is to copy and paste the full path to a local file in their markup:
This can be a frustrating error, as the browser on our own computer can locate and display the image. But when the site is uploaded to a live web server, the image won’t appear, since the location is no longer valid.
External CSS Style Sheets
Our earlier example of an external CSS style sheet assumed the actual CSS file was in the same directory as the XHTML file. Now that we are better organizing our site, we should move the CSS file to its own folder:
Relative Paths in Style Sheets
As we know, CSS style sheets can set background images for elements. Now that the style sheet is in its own folder, we need a way to point the CSS file to an image that is located up one folder level and then down into a different subfolder: