Referencing A Style Sheet

[ben03]

I have got myself a bit lost with the importing of styles on my site.I have made a sub folder on the root called 'clubs'. In here I have a css file called layout.css. I am creating a webpage in this folder but need to reference layout.css and a css folder on the root called 'styles.css' . What is the correct syntax for importing each one into the document?Thanks

[student101]

Safer to use folder like CSS, helps to remember where all the stylesheets are.My method would look like this;

<link href="css/styles.css." rel="stylesheet" type="text/css" /><link href="css/layout.css" rel="stylesheet" type="text/css" />

Your method would look like this;

<link href="styles.css." rel="stylesheet" type="text/css" /><link href="clubs/layout.css" rel="stylesheet" type="text/css" />

This goes before the </head> tag.http://www.w3schools.com/css/css_intro.asp

[jeffman]

<link href="styles.css." rel="stylesheet" type="text/css" />					  ^

What's up with the final dot?

[student101]

I type too fast, good catch!

[Rufus]

Also consider adding the media attribute to distinguish between things like print stylesheets and screen stylesheets.

<link href="link/to/file.css" rel="stylesheet" type="text/css" media="screen" />

[ben03]

That's great thanks for the help there. Is it possible that it won't reference properly on the offline version?

[real_illusions]

Only if your folders are different or your files are called stYlEs.css and you're telling it to find styles.css or something and the server is setup to be case sensitive.Best to make sure all folder and filenames are typed exactly how they are named and are in the same location (relative to each other) both on your local version and online version. Saves alot of time editing between the 2.

[ben03]

<link href="styles.css" rel="stylesheet" type="text/css" /><link href="clubs/layout.css" rel="stylesheet" type="text/css" />

Maybe I can see the problem here. The page this code is to be added to is in the same folder as the stylesheet 'clubs.css'. Does this make a diference to how it should be refenced? (also do you not need to add anything to reference a stylesheet placed on the root?). Thanks.

[thescientist]

yes, if the HTML and the CSS are in the same folder, than just use href="style.css", with no need for rooting around folders and directories. To reference something in the root, yes you do need something else before the file name, which I believe has been explained in a previous post.

[thescientist]

as far as online and offline versions, typically developers keep them the same, so uploading to a web root from a local machine is seamless and doesn't involve any fancy referencing. On your server, consider the root to be where your index.html file is located. Make a folder on your local machine with the same index.html in it, (you can even name the folder "root" if you want to). From then on, create all your folders and files relative to that "root" folder (although you will never use it in a filepath) and hopefully that should maintain consistency between local and host.