HTML not accessing CSS external file

Question

Beginning stage of learning CSS. Working on a project that is having me modify HTML file externally, internally, and inline. Have successfully accomplished all but external.

HTML file

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Methods for Adding CSS</title>
      <link rel=”stylesheet” href="styled.css">
      <style>
        p {color: white; background-color: green;font-size:18px}
      </style>
    </head>
    <body>
      <div>Style me via the external method!</div>
      <p>I would like to be styled with the internal method, please.</p>
      <button style=background-color:orange;font-size:18px;>Inline Method</button>
    </body>

CSS file

    div {
      background-color: red;
      color: white;
      font-size: 32px;
      text-align: center;
      font-weight: bold;
    }

Line 8 is the piece of code that links to the external file.
The HTML and CSS files reside within the same folder.

I have tried creating new CSS files within the folder, from VSCode and by ctrl+ clicking the reference link within the terminal and dragging/dropping from folder to VSCode. Also tried ./styled.css and ../styled.css, opened the css file from the folder to verify the code in there. Opened in chrome dev tools, network, selected CSS. It does not display any files. Reasonably confident the syntax is correct. I feel like the HTML is not locating the CSS file but at a loss of how to remedy this.

How does your file directory look?

Rhett Harrison
– Rhett Harrison

2021-12-09 00:22:01 +00:00
Commented Dec 9, 2021 at 0:22 — Rhett Harrison
– Rhett Harrison, Commented Dec 9, 2021 at 0:22

isherwood · Accepted Answer · 2021-12-09 14:21:12Z

3

The problem is the wrong quote in line number 8 ”stylesheet”. Change the quote characters to "stylesheet" and it will work.

edited Dec 9, 2021 at 14:21

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Dec 9, 2021 at 0:31

Bikash Gurung

462 bronze badges

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

2 Comments

Loptr Over a year ago

I replaced the quotations and it works. I don't understand this at all. Thank you.

isherwood Over a year ago

Those fancy quotation marks are not interpreted properly in HTML. They're not the same thing.

Amit Gupta · Accepted Answer · 2021-12-09 14:18:31Z

3

Please change double-quotes from ” to " and clear browser's history. I hope it will work fine.

answered Dec 9, 2021 at 14:18

Amit Gupta

313 bronze badges

2 Comments

isherwood Over a year ago

To clarify, you have styled quote characters in your markup as though pasted from a word processor. They're not valid HTML.

Loptr Over a year ago

I copied out of google docs so i understand the error as explained. I am curious how you were able to tell?

Lawrence · Accepted Answer · 2021-12-09 00:32:05Z

0

If everything is correct, the filename and dir. Try clearing the cache of your browser.

answered Dec 9, 2021 at 0:32

Lawrence

161 bronze badge

1 Comment

Loptr Over a year ago

no dice, but good reminder

Collectives™ on Stack Overflow

HTML not accessing CSS external file

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related