Home > front end >  HTML not accessing CSS external file
HTML not accessing CSS external file

Time:12-09

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.

CodePudding user response:

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

CodePudding user response:

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

  • Related