As a programmer I’m about making things easier. I create a main page, set it up to go and then start coding away in other files. That’s why EVERY TIME I start a new project of any size I spend a minute scratching my head and going “how do I include that CSS file again?” I figured if you are as bad as I am I would provide you with a brief tutorial so that BOTH of us won’t forget.
The first approach and the easiest to use is the HTML [link] tag. This tag is placed inside of the [head] tag. Below is an example of this.
1 2 3 | <head> <link rel="STYLESHEET" type="text/css" href="/css/main.css" /> </head> |
This works pretty well and is easy to implement. I did encounter one issue with the lighttpd web server in that it tries to resolve relative references in the href tag above from the document root. This was an issue because the file with the link tag was in a sub folder. nitrox on the lighttpd IRC channel (irc.freenode.net) helped me sort this out. I think that Apache and IIS will try to resolve the reference relative to the folder of the page requested.
The other approach is to use the @import rule from CSS2. This is a statement that is added inside a style tag and includes and external style sheet where it sits. I could try to explain this, but I would prefer to let others who are more capable and knowledgeable than me do it. Check out the link below for some good information on @import.
http://css-discuss.incutio.com/?page=ImportHack
I hope this post helps you (and me) avoid any issue in the future. If you have a question or would like to correct my description or word choice please post a comment.
Peace
