HTML not loading CSS

Question

I'm trying to load a css file. I've tried:

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

And:

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

I even moved it to the same directory as the html and tried both of the above options without the "css" directory in the name..

I tried refreshing the page, and putting my CSS through the W3 schools validator and it passed..

I'm not a web developer so I'm not familiar with these sort of issues. Does anyone have any idea what it is?

EDIT: The error is

[02/Jun/2014 10:37:23] "GET /css/style.css HTTP/1.1" 404 1953

My IDE (PyCharm), recognizes it's existence, it isn't recognized when it's ran.

It is currently in another directory called "css". I have moved it between the same directory, and the "css" one and neither has worked

@King I'm aware of that... It's physically there and Pycharm can see it, but when I run it, it cant find it. — Maximas, Jun 02 '14 at 10:41
If it is in the same directory as your html you should use href="style.css" — Andi, Jun 02 '14 at 10:41
@JoakimM I assumed it automatically would be, as everything else seems to be.. How would I include it in the build? — Maximas, Jun 02 '14 at 10:42
@Maximas Well I don't know Pycharm but in VS it's Build action =Content. — Joakim M, Jun 02 '14 at 10:47
Where in the file do you include the css? I hope it's in the head :) — Joakim M, Jun 02 '14 at 10:47
I'm just using a virtual env, I'm using Django. I do include it in the head — Maximas, Jun 02 '14 at 10:49
http://stackoverflow.com/questions/9145994/django-and-css-and-a-really-simple-example-please — Joakim M, Jun 02 '14 at 10:54
Thank you! I didn't mention Django as I assumed it would handle it like a normal HTML file.. I really appreciate it! (Could you mention that in an answer so I can mark this as answered please?) — Maximas, Jun 02 '14 at 10:56

score 16 · Accepted Answer · answered Jun 02 '14 at 11:01

I can't give you a specific answer as I don't know what your local file structure is like (if you post it in the question, I might be able to give you a direct answer).

The issue stems from how you use the path. I'll explain all options you've tried and what they actually do:

1 - No starting dots, no starting slash

href="css/style.css"

If there is no prefixed character, you're working in the same directory as your html file.

For the above example, I'd expect the structure to be as follows:

- CSS (folder)
    - STYLE.CSS (file)
- PAGE.HTML (your HTML file)

That means the HTML file and the CSS folder should be siblings.

2 - Starting dots and slash

href="../css/style.css"

Now you're working in the parent directory of the HTML file's location. Suppose your folder structure is as follows:

- CSS (folder)
    - STYLE.CSS (file)
- WEBSITE (folder)
    - PAGE.HTML (your HTML page)

In this structure, the HTML page and the CSS folder are not siblings. But the CSS folder and the HTML page's parent are siblings. So, you need to go up one level, which you accomplish by adding ../ like in the example.

*Note: This can stack. You could put href="../../../css/style.css", and then you'd be working from the parent of the parent of the parent of your HTML page.

3 - Starting slash

href="/css/style.css"

Now you're working in the root directory of your website (not your page!)

Suppose your webpage is accessible via the following URL:

http://my.website.com/myapplication/newversion/page.html

Using the leading slash means that the working folder is set to the highest possible parent (which is always the web domain). So for the given example, the css file will be searched on the following location:

http://my.website.com/css/style.css

This type of notation is better used when using an absolute path. Generally speaking, and I think this applies in your case, you'd want a relative path. Options 1 and 2 are much better suited for that.

Like I said, I can't give you the specific answer if I don't know your folder structure. If you update your question, I could update my answer further.

I worded my question badly, and didn't include the fact that I was using Django... This doesn't answer my issue specifically, but I'll mark it as the right answer as it is really well explained. As well as that, it answers the question which everyone thought I was asking. — Maximas, Jun 02 '14 at 11:21
Thanks :) I'm not knowledgeable about django though, so I couldn't have helped you there :) — Flater, Jun 02 '14 at 11:37

score 2 · Answer 2 · answered Jun 02 '14 at 10:53

ok this is what you need to do

create a directory css
add this to head tag <link rel="stylesheet" href="css/style.css">

Relative path work this way Starting with "/" returns to the root directory and starts there Starting with "../" moves one directory backwards and starts there

score 2 · Answer 3 · edited Sep 25 '18 at 22:03

I want to post my own version of the answer on this very old thread as I just found a possibly known but 'ignored-after-solving' way of getting into this problem of CSS just refusing to link with the HTML. I spent hours on trying to solve the problem and in the end, it turned out to be a very trivial thing. Do not want others to go through the same ordeal. So here we go:

Since I was new to HTML/CSS I tried to copy some sample code snippets from the internet. While doing so I linked my CSS file as follows:

<link rel=¨stylesheet¨ type=¨text/css¨ href=¨chat.css¨>

While at first glance the code looks perfectly fine, on viewing carefully (which unfortunately I did after hours of googling around) it turns out that the quotation marks I had used (copied from internet code) were not really quotation marks but some other characters. I found this because they looked smaller when compared to other quotation marks typed in my code elsewhere and which looked more like: ""

On realizing this I changed the quotations in the CSS link:

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

and lo-behold everything started working beautifully (thanks CSS).

Lesson learned - Beware of copy/paste from the internet.

I wish I had been more diligent earlier.

Hope this helps some searching soul in future!!

score 1 · Answer 4 · answered Jun 02 '14 at 11:00

The error is a page not found error, which indicates the web server can't find the file it was told to look for at "/css/style.css". The leading / with no dots indicates the root level of the website.

If you can load the web page which includes the css file, the path will be relative to the web page. "./style.css" and "style.css" both point to file style.css the same directory as the webpage; "../style.css" points one directory up. "../css/style.css" points one directory up, then down through the css directory.

If the path seems right, double-check the case of the directory and filenames - if your server is case-sensitive, it will treat files called Style.css and style.css as different files.

Can you browse directly to the file at /css/style.css on your website?

Unlikely, but it can be worth checking that the files have read permissions for the webserver's user.

Is it possible that your browser, or an intervening proxy is caching the file? Try a hard refresh if you web browser has one, or clearing your cache.

score 1 · Answer 5 · answered Nov 18 '14 at 01:25

1

If you are using a home brew webserver (not Apache, for example), the content type of the *.css file might not be set as "text/css".

Be sure your webserver is putting in the field

 Content-Type: text/css

in the http header.

answered Nov 18 '14 at 01:25

Mark Lakata

19,989
5
106
123

score 0 · Answer 6 · answered Jun 02 '14 at 10:39

0

Try style.css and it will work, as it is in the same directory.

answered Jun 02 '14 at 10:39

Nitesh

15,425
4
48
60

This hasn't helped.. :) – Maximas Jun 02 '14 at 10:39
Can you try an absolute URL to check whether it works or not ?? If absolute URL works, then there is an issue defining a relative URL. - @Maximas Also, try only style.css – Nitesh Jun 02 '14 at 10:41
Using this seems to make Pycharm throw a hissy fit... (It highlights in yellow if it can't find something) However when I use /css/style.css is doesn't highlight in yellow, despite the 404 – Maximas Jun 02 '14 at 10:45
1

/css/style.css is not correct. But style.css will work if it is in the same directory. Also, check for CAPS, as sometimes, the server does not show up for CAPS also. - @Maximas – Nitesh Jun 02 '14 at 10:48
I've checked the names, it all seems okay as far as capitalization goes... This is not working for me despite it being in the same directory. I'm begining to consider whether it may be an issue with the Framework I'm using – Maximas Jun 02 '14 at 10:51

score 0 · Answer 7 · answered Jun 02 '14 at 10:43

0

If you moved to the same directory

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

Should work...

answered Jun 02 '14 at 10:43

ZeroWorks

1,618
1
18
22

This is still giving me: [02/Jun/2014 10:47:33] "GET /style.css HTTP/1.1" 404 1941.. I've checked the file names, and it appears to be right. – Maximas Jun 02 '14 at 10:48
Can you access the css file with absolute url (http://yourhost.com/css/style.css)? maybe the server is not serving the file, which server are you using? Also check the filename is in lower case. – ZeroWorks Jun 02 '14 at 10:48
And which is your OS? and where are you seeing 404 error if you are on local??? also is link in head? – ZeroWorks Jun 02 '14 at 10:54

score 0 · Answer 8 · edited Jun 02 '14 at 10:50

0

You do not use ./ , you have to either use ../ when the file is one level down from your original HTML directory or simple use css/style.css no forward slashes. I believe the problem is with your naming conventions, please double check the names of folder and files. If files are on same directory then simply use style.css no forward slashes or directory name.

edited Jun 02 '14 at 10:50

Chetan Gawai

2,361
1
25
36

answered Jun 02 '14 at 10:44

Shashi

474
6
21

score 0 · Answer 9 · answered Jun 02 '14 at 10:49

0

<!DOCTYPE html>
   <head>
       <title id="HtmlTitle" runat="server">YadaYada</title>
       <link href="style.css" rel="stylesheet" type="text/css">
   </head>
   <body>
      <span>GoodBye World!</span>
   </body>
</html>

answered Jun 02 '14 at 10:49

Joakim M

1,793
2
14
29

score -1 · Answer 10 · edited Dec 24 '20 at 21:04

-1

Try adding ../ before the URL; for example:

href="css/styles.css" ----[BECOMES]---->>  href="../css/styles.css";

edited Dec 24 '20 at 21:04

Steven

6,053
2
16
28

answered Dec 24 '20 at 16:02

tushar

1

HTML not loading CSS

10 Answers10

Linked

Related