How do i properly link my css and html file together, inspect element says "ERR_FILE_NOT_FOUND"

titus Published at Dev

Titus

I've tried all the methods from HTML not loading CSS file but they don't seem to work. When I tried to inspect the element on chrome, they tell me

"Failed to load resource: net::ERR_FILE_NOT_FOUND" .

Here is my file structure

C>DevProject>index.html
and in my index.html there are two items one "index" which is my HTML folder, clicking it opens the website. And another item " style" which is my CSS file, clicking it opens notepad with the code

Here is the code

<!DOCTYPE html>
<html>
<head>

  <title>Test Title</title>
     <link href="/style.css/"type="text/css" rel="stylesheet">
</head>
<body>
    <h1>H1 text</h1>
    <p>I'm learning to code on Codecademy! My goals include:</p>
    <ul>
      <li>Goal 1</li>
      <li>Goal 2</li>
      <li>Goal 3</li>
    </ul>

</body>
</html>

Here is the CSS code

* {
    font-family: Helvetica, Arial, sans-serif;
  }


  h1 {
    color: SeaGreen;
  }


  p, 
  li {
    font-size: 18px;
  }


  a {
    text-decoration: none;
  }

I have also tried changing to href="DevProject/index.html/style.css/" but "Following the link" through VS code gives me the

Unable to read file 'c:\DevProject\index.html\DevProject\index.html\style.css\

I ensured that the encoding is UTF-8

I have also tried separating the CSS and HTML file like

Devproject>style.css>style

but same error

Jared Newnam

You've made a simple mistake, yet one that I've seen beginners make many times.

I'd recommend you start by removing the trailing slash at the end of your stylesheet reference.

If you have your stylesheet in the same directory as your index.html file, then do it as you see below. If you have your stylesheet inside of a css folder, then you can simply change it to <link rel="stylesheet" href="css/style.css">. Additionally, the type="text/css" isn't necessary.

<!DOCTYPE html>
<html>
<head>

  <title>Test Title</title>
     <link href="style.css" rel="stylesheet">
</head>
<body>
    <h1>H1 text</h1>
    <p>I'm learning to code on Codecademy! My goals include:</p>
    <ul>
      <li>Goal 1</li>
      <li>Goal 2</li>
      <li>Goal 3</li>
    </ul>

</body>
</html>

Hope this helps.

Collected from the Internet

Please contact [email protected] to delete if infringement.