CODEWITHSUNDEEP
htmlcss
GardenQuant
GardenQuant

Reputation: 143

CSS file refuses to link to HTML file

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)

Here's where I keep the files.

Here's the syntax I'm using to link the files.

File path on my HTML.

File path on my CSS.

Upvotes: 3

Views: 343

Answers (6)

Andy
Andy

Reputation: 14575

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

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

Upvotes: 4

Christofer Vilander
Christofer Vilander

Reputation: 18072

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!

Upvotes: 2

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

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?

Upvotes: 0

Nikola K.
Nikola K.

Reputation: 7155

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.

Upvotes: 1

Filipe Manuel
Filipe Manuel

Reputation: 995

Try using syntax: body { background-image: url("Joe-Image/Joe-logo.png");} and are you sure you added the CSS in your html file?

Upvotes: 0

Ken Ray
Ken Ray

Reputation: 2528

Use a debugging tool in a web browser - Firebug in firefox, or the F12 developer tools in IE for example - to see what CSS is being loaded with your web page.

Upvotes: 0

Related Questions