You can put the CSS file wherever you want (inside the directories
visible to the web server). However, you gotta tell the browser where
it is. You told the browser, but you told it somewhere it was not.
Your possibilities are:
RELATIVE REFERENCES
Works relative to your HTML file location. This is easy and quick,
but if you move either the HTML or CSS file to another LEVEL in your
directory structure, then you break the link.
“Personal.css” = same directory as the page that calls it
www.YourDomain.com/subdirectory/MyFile.html
www.YourDomain.com/subdirectory/Personal.css
“../Personal.css” = directory above the page that calls it
www.YourDomain.com/subdirectory/MyFile.html
www.YourDomain.com/Personal.css
“../../Personal.css” = two directories above the page that calls it.
www.YourDomain.com/subdirectory/subdir2/MyFile.html
www.YourDomain.com/Personal.css
“../shared/Personal.css” = one directory above, then down into the
shared directory that is at an equal level with the subdirectory the
HTML file is in.
www.YourDomain.com/subdirectory/MyFile.html
www.YourDomain.com/shared/Personal.css
ABSOLUTE (SERVER ROOT) REFERENCES
This is much more reliable if your site changes much. However, your
web server must be configured to do this. It is easy to configure if
you are familiar with such things. IF YOU USE ABSOLUTE (SERVER ROOT)
REFERENCES, THEN YOU CAN MOVE YOUR HTML FILES AT WILL AND YOU WILL NOT
BREAK THE LINK TO THE CSS. NOTE THAT YOU CAN ALSO USE THIS SAME
METHOD OF ADDRESSING IMAGES AND ANY OTHER LINKS THAT ARE WITHIN THE
SAME SERVER ROOT.
“/Personal.css” = css file is located in the server root directory.
This would be www.YourDomain.com/Personal.css
“/shared/Personal.css” = = css file is located in the shared
subdirectory one level down from the server root directory. This
would be www.YourDomain.com/shared/Personal.css
