CODEWITHSUNDEEP
css
Matthew James Briggs
Matthew James Briggs

Reputation: 2265

CSS File not Loaded

I have the following file and directory structure

enter image description here

In practice.html I have

<html>
  <head>
    <title>Practice</title>
    <link type="text/css" rel="stylesheet" href="css/styles.css"/>
  </head>
  <body>
      <p>Paragraph</p>
      <h1>Heading</h1>
  </body>
</html>

And in styles.css I have

p {
    font-family: "Ubuntu", "Times New Roman", Times, serif;
}

h1 {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: red;
}

I've been staring at this for a while. None of my browsers render using the css styles. How can I figure out what the problem is? I can see in Chrome that the css file is not being loaded, but I can't tell why.

I'm a C++ programmer venturing into the scary world of web. Thanks.

enter image description here

Upvotes: 0

Views: 54

Answers (3)

Red Velasco
Red Velasco

Reputation: 103

I might recommend coding in Incognito so local scripts will load faster.

When you using chrome also try to hard refresh (CTRL+SHIFT+R) at the same time so you would see the changes being done immediately

Goodluck!

Upvotes: 0

Matthew James Briggs
Matthew James Briggs

Reputation: 2265

This was a real time waster. It turns out that the code <link type="text/css" rel="stylesheet" href="css/styles.css"/>, which I copied from a macOS iBook, contained the unicode character for non-breaking whitespace instead of the standard space character. When I looked at these in hex mode they were c2a0. Replacing these with 20 fixed the problem.

What I find disappointing is that neither Firefox nor Chrome reported that anything was going wrong during the parsing of the html.

Also note that pasting the code into Stack Overflow seems to have normalized these non-breaking spaces to the more common 20 spaces, so nobody could have reproduced my problem.

Upvotes: 0

Christopher Messer
Christopher Messer

Reputation: 2090

Nothing is wrong with your code. Whenever you're doing this type of simple web dev stuff, always hard refresh your windows (Ctrl + F5 on Windows, Opt + Cmd + E on Mac).

I can't tell you the amount of times I thought I was doing something wrong only to realize I wasn't hard refreshing and a change was not being read.

Upvotes: 1

Related Questions