CSS file refuses to link to HTML file

Question

I'm pretty new to the realm of web design, however, I've been having a problem that really has me stumped. My CSS file will not link with my HTML file. I've checked everything(I think). The file paths are identical, I linked the files with the correct syntax, yet it's still not working. I've attached some photos to help you guys get a better understanding of my problem. If you need more info, I'll be happy to provide it.

The first image is the folder I'm keeping the files in. The second one is the syntax I'm using to link the HTML and CSS. And the third and fourth files are screenshots of my editor, with the file paths on top. (And yes, I'm aware the CSS file is empty. But since it wasn't working correctly, I left it blank for now)

Answer 1

How do you know its not working if the CSS is empty?

Type body { background-color: #f0f; } body { background-color: #f0f; } to test if it's working.

Answer 2

Sometimes you need to force the browser to use the latest styelsheet. You can achieve this by adding a query string in the link.

Like this:

<link rel="stylesheet" href="Joe.css?v=1.1" "type="text/css"/>

As you can see I've added ?v=1.1 after "Joe.css

Then simply change version number every time you have done some changes in your CSS file. So in this case, when you have updated the CSS file you can change the number to ?v=1.2 and so on. By doing this you are forcing the browser to use the latest css.

But please note that you should only add this to the link not to the actual filename Joe.css - that stays the same.

Hope that helps!

Answer 3

You should debug your code.

Firstly, replace your <link> tag with the following and see if it works:

<style type="text/css">
    body { background-color: #000; }
</style>

If your background color is changed to black - that's a good sign. If not, something's wrong with your script or browser.

---

Next, replace the above piece of code with the following:

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

Create the file style.css in the same directory as your HTML script and put the following code in it:

body { background-color: #000; }

If that doesn't work, something's wrong with your script or browser.

---

btw, try to clear your browser cache.

Answer 4

在Web浏览器中使用调试工具 - 在firefox中使用Firebug，或在IE中使用F12开发人员工具 - 以查看您的网页正在加载什么CSS。

Answer 5

尝试使用语法： body { background-image: url("Joe-Image/Joe-logo.png");}你确定在你的html文件中添加了CSS吗？

Answer 6

Try this:

<link href="./joe.css" rel="stylesheet" type="text/css" media="all" />

I inserted the relative path. You could also try this:

<link href="./Joe.css" rel="stylesheet" type="text/css" media="all" /> 

With upper case j. Perhaps your web server is case sensitive?