APIUM APIUM - 6 months ago 13
HTML Question

HTML doesn't loads external CSS File

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'/>

Answer

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:

  1. Your CSS file name has Uppercase names like: Style.css or Bootstrap.css
  2. 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.
  3. 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:

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

And here's how it is after fixing it:

enter image description here