Cannot get CSS to apply to HTML file

Question

<!DOCTYPE html>
<html>
  <head>
    <meta charset=“UTF-8” />
    <title>Footer Design</title>
    <link rel=“stylesheet” type=“text/css” href=“style.css” />
  </head>

  <body>
    <div id=“footer”>
      <div id=“footer-col-one”>
        <h3>Categories</h3>
        <ul>
          <li>Snow</li>
          <li>Surf</li>
          <li>Travel</li>
        </ul>
      </div>

      <div id=“footer-col-two”>
        <h3>Navigation</h3>
        <ul>
          <li>Home</li>
          <li>About</li>
        </ul>
      </div>

      <div id=“footer-col-three”>
        <h3>Follow Me</h3>
        <ul>
          <li>Facebook</li>
          <li>Twitter</li>
          <li>Instagram</li>
        </ul>
      </div>
    </div>
  </body>
</html>

For some reason I cannot get my CSS stylesheet to apply. It's not the same directory as this html file. I'm using TextEdit and set it up for use with html & css. I did notice that any where I had double quotes I'm getting some weird output on Chrome Developer Tools like the following:

<link rel=â€œstylesheetâ€ type=â€œtext/cssâ€ href=â€œstyle.cssâ€ />

Oops the code is showing up in chrome developer tools like this: <link rel=â€œstylesheetâ€ type=â€œtext/cssâ€ href=â€œstyle.cssâ€ /> — user3127783
– user3127783, Commented Dec 22, 2013 at 19:47
hi! welcome to Stack Overflow! what @Brad mentioned is that the character you have is “ for left quotes and ” for right quotes. In general, in most programming-like settings you'll want to use ". The other symbols (“, ”) often cause issues. Try it out and let us know! — arturomp
– arturomp, Commented Dec 22, 2013 at 20:08

Quentin · Accepted Answer · 2013-12-22 19:48:15Z

5

You can't delimit HTML attribute values with “ characters, you must use " or '.

zoomed in screenshot of the above text

Left/Right quotes will be treated as part of the value (and thus the URL) and not as HTML special characters.

Your problem is most likely caused by writing code using a Word Processor with Smart Quotes turned on. Use a text editor (I'm fond of Sublime Edit 2 myself, but there are many other excellent choices such as Komodo Edit and Brackets).

This would have been picked up (albeit not explicitly) had you used a validator.

answered Dec 22, 2013 at 19:48

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

James Craig Over a year ago

I didn't even see this the first time looking at his code. Good spot.

Jukka K. Korpela Over a year ago

Alternatively, the quotation marks can be simply omitted, except in some special cases. In the example, no quotation marks are needed.

Asraful Haque · Accepted Answer · 2013-12-22 19:59:57Z

Please use this source formatting .Do not use “ . Use " . If your style.css file is in the other location means suppose that style.css is in the css folder so give the path like href="css/style.css"

Hope the answer and use this below html code which I have modified!

Footer Design

<body>
<div id="footer">
  <div id="footer-col-one">
    <h3>Categories</h3>
    <ul>
      <li>Snow</li>
      <li>Surf</li>
      <li>Travel</li>
    </ul>
  </div>
  <div id="footer-col-two">
    <h3>Navigation</h3>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </div>
  <div id="footer-col-three">
    <h3>Follow Me</h3>
    <ul>
      <li>Facebook</li>
      <li>Twitter</li>
      <li>Instagram</li>
    </ul>
  </div>
</div>
</body>
</html>

Collectives™ on Stack Overflow

Cannot get CSS to apply to HTML 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