27

I am using Windows (7) trying to create an offline html page that should link to a separate CSS file located in same directory. I tried to use

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

but no luck.

And I also want to import another css file named styles2.css within style.css. Didn't check yet but putting @import "style2.css"; on style.css may be not work as well. I can use absolute links like C:\Users\ELITEBOOK\Desktop\offline\style.css but it won't work if I move the folder anywhere else from Desktop. Any help? I mean, any code that calls/adds the link of the folder?

3
  • Try removing the forward slash if it is in the same directory.
    – Leggy
    Nov 11, 2014 at 18:51
  • That is also working @FirstLegion. What if css's are in subfolder or page.html are in subfolder? Nov 11, 2014 at 19:00
  • If the css is in another directory then you can do <link rel="stylesheet" type="text/css" href="foldername/styles.css" /> If the html is in a subdirector then do this <link rel="stylesheet" type="text/css" href="../styles.css" />
    – Leggy
    Nov 11, 2014 at 19:29

4 Answers 4

40

Use <link rel="stylesheet" type="text/css" href="./styles.css" /> instead. Note: href="/styles.css" changed to href="./styles.css", which is current directory of your script.

3
  • Yes! That is damn simple! Thank you. I don't have repu so cant vote up yet. And If i upload those to a server (in public_html) then I have to remove the dot or that work? Nov 11, 2014 at 18:57
  • You can still accept his answer though and that will gain both yourself and him reputation.
    – Leggy
    Nov 11, 2014 at 19:31
  • 2
    @Sahriar: It is common standard practice for your /public_html folder to be the default folder from where your webserver serves contents from. The notation ./ means this directory (i.e. current directory); while / means the root directory (in this case, the directory where /public_html resides). So on your production server, when you want to refer a file from the same folder you are running a script, you can use the ./filename notation. This is basically "Relative Path Referencing". Read this nice wikipedia article on Path: en.m.wikipedia.org/wiki/Path_(computing) Nov 11, 2014 at 20:17
11

While the accepted answer is not wrong it's over-complicate things.

If your file is https://www.google.com/b/bananacream/bananas/index.html

<link rel="stylesheet" href="/style.css">

Will try to get https://www.google.com/style.css as the last / tells the file is located in the "root" folder.

<link rel="stylesheet" href="style.css">

Will try to get https://www.google.com/b/bananacream/bananas/style.css as nothing indicate what folder the file is located in it will use the same folder as the requesting file.

<link rel="stylesheet" href="./style.css">

Will try to get https://www.google.com/b/bananacream/bananas/style.css as ./ tell that the file is located in the same folder as the requesting file.

<link rel="stylesheet" href="../style.css">

Will try to get https://www.google.com/b/bananacream/style.css as ../ tell that the file is located in the previous folder as the requesting file.

<link rel="stylesheet" href="../../style.css">

Will try to get https://www.google.com/b/style.css as ../../ tell that the file is located in the folder two steps before as the requesting file.

6

A general complete answer:

to address through existing folder, use:

<link rel="stylesheet" href="./style.css">

to address through parent folder, use:

<link rel="stylesheet" href="../style.css">

to address through the internet( CDN ) use:

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3./css/bootstrap-theme.min.css"
  >

to address through your hard drive use:

<link rel="stylesheet" href='file:///C:/mystyles.css'>
2

try this one, it worked for me.

 <link rel="stylesheet" href="./main.css">
1
  • Code blocks on their own are not usually useful answers. If you could please edit your answer and explain what the code you're showing does, and why/how that code answers the question, it could really help.
    – Lea Cohen
    Feb 8, 2015 at 12:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.