Home Top Ad

How do I link to my css stylesheet for local file?

Share:


Let's assume you have a folder in your documents folder, we'll call it 'projects'. Now inside that you have separate folders for each project. Their names will be easy for you to identify them by, which makes sense, so let's say you're working on a blackjack program and have it and all the related files in a blackjack folder.
The folder will contain your HTML file, you can call it just index.html (or blackjack.html) so long as it's the only file by that name in the folder. it will contain a style sheet, by any name, but let's call it style.css for simplicity (or you could call it 'blackjack.css' so it's easy to search for on your local drive. Your script file(s) will be named something.js and somethingelse.js. You could even download latest jQuery (version 1 recommended) and the latest jQuery UI (again, version 1) as well as the UI style sheet, and bundle them all into that one folder.
When you get to building lots of programs that all use the same jQuery, you may wish to create a 'js' folder in the root of your 'projects' folder, and move the jQuery files there, as well as any other 'shared scripts". We'll cover this in a moment.
Now that all the files are present, we need to tell the document where they are. This is easy, since they are all in the same folder as the HTML file.
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="UI.css"> <!-- made up name-->
<script src="jquery.js"></script><!-- made up name-->
<script src="jquery.ui.js"></script><!-- made up name-->
<script src="script.js"></script>
These tags all go in the <head> section of your document, in basically the above order.
After you 'run the page' open the JavaScript console and check for errors, such as missing jQuery. The error will be something like '$ is undefined'. Check if jQuery is present by polling 'typeof jQuery' to which the return should be 'function'. After this you should be good to go.
But what if the js files are all in the projects/js/ folder? Point your page to this location:
Assuming our HTML is in the blackjack folder, which is a sibling folder to 'projects/js', then your script tags will look something like this:
<script src="../js/script.js"></script>
Notice the ../? This references the parent folder of the one the document is in. We go up one level to where the js folder is.

Aucun commentaire