HTML doesn't loads external CSS File

Question

I have no idea why my CSS won't load, I've included the first part of my html.

Firebug and Chrome aren't giving me any issues loading the file.

Anyone know why this might be?

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<script src='script.js'></script>
<link rel='stylesheet' href='style.css'/>

One or both of your CSS files won't load? It shouldn't matter, but you can also add type="text/css". — j08691
– j08691, Commented May 22, 2014 at 14:14
Adding type="text/css" is only another opportunity for a typo that breaks things. — Quentin
– Quentin, Commented May 22, 2014 at 14:15
is the path right? do you have the stylesheet in the same folder as the html file? of in an other folder? — Carl0s1z
– Carl0s1z, Commented May 22, 2014 at 14:15
check if your styles aren't Style.css or Bootstrap.css (I mean 1st letter capitalized). and look for the path of your files — Frakcool
– Frakcool, Commented May 22, 2014 at 14:19
path is right - when you check the url you are getting the css... — Mr. iC
– Mr. iC, Commented May 22, 2014 at 14:52

Community · Accepted Answer · 2017-05-23 11:52:46Z

1

Not sure about all these:

As you don't say which of the CSS is wrong, it's a bit more complex to fix it, but checking the code you provide there are 3 possible or common issues that might be the reason your CSS isn't loaded:

Your CSS file name has Uppercase names like: Style.css or Bootstrap.css
Your path is wrong: ../styles/style.css might be one of the possible paths (as we don't have an image of the structure of your project I can't tell you how to do it in the correct way.
You have <link rel='stylesheet' href='style.css'/> with 1 apostrophee instead of " quotation mark

I mean on the 3rd posibility that:

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

should become:

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

and adding type="text/css" as j08691 said, this should become the following code (also note that I deleted last / too):

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

And the same goes with the script, I mean quotation marks(") instead of apostrophees (')

EDIT

After looking at your site, your classes have a Capital letter name, like this one:

<div class="Header">

and your CSS file is:

.header {
    background-color: #BFBFBF;
}

there are 2 ways of solving it:

Change your div class name to lower case names
Change your style to capital letters.

And here's how it is after fixing it:

enter image description here

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered May 22, 2014 at 16:33

Frakcool

11.2k10 gold badges56 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

APIUM Over a year ago

It was the 'style.css' that won't load. I got rid of the capitalisation, changed the quotation marks, and I tried the linking that you suggested, neither worked. The file is definitely in the right place, and bootstrap loads, so I am really stumped as to what the issue at hand is.... Completley forgot, link to the site in question is canopyfoods.com

Frakcool Over a year ago

@user3665464 check my edit now and next time post a Fiddle with an MCVE with enough code that demonstrates the issue to make it easier to help you :)

DA. · Accepted Answer · 2014-05-23 05:24:22Z

0

It's loading just fine. If you go to your web site, open developer tools, and click on styles.css it's there.

So, that's not the problem.

The problem is your CSS isn't matching anything.

You have:

.header {...styles...}

But your HTML is:

<div class="Header">

It looks like you capitalized all your class names in your HTML, but not your CSS file.

(I just noticed Frakcool edited his answer while I was typing with the same observation. Do give Frakcool the credit for correct answer!)

edited May 23, 2014 at 5:24

answered May 23, 2014 at 5:18

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Collectives™ on Stack Overflow

HTML doesn't loads external CSS File

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related