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

Answer 1

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

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

Answer 2

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!!

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

ok this is what you need to do

1. create a directory css
2. 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

Answer 7

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.

Answer 8

<!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>

Answer 9

If you moved to the same directory

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

Should work...

Answer 10

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