Why isnt my css linking to html?

Question:
IM NEW TO CODING and my css isnt linking to the html
Repl link:
This might be a common question here but i could really use direct help with my sad coding​:sob: :sob: I just started coding yesterday with the help of W3schools so please dont judge me…

This is my html index thingy
```<html>
<head>
<title>title example</title>
</head>
    <head>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
    
<body>
<center>paragraph example</center>


</body>
</html>
-------
------
-------
this is the CSS one
```<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="index.html">
</head>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 100px;
  margin-left: 100px;
  background-color: pink;
}
body {
  background-color: darkslateblue;
}
</style>
</head>
<body>

<h1><center>title</h1>
<div><p><center>paragraph</p></div>

<h1>header</h1>

</body>
</html>

:wave: Welcome to the forum!

The reason is because that’s an HTML file, so you can’t link it like that.

To use this CSS in index.html, replace index.html with this:

<html>
<head>
<title>title example</title>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 100px;
  margin-left: 100px;
  background-color: pink;
}
body {
  background-color: darkslateblue;
}
</style>
</head>
    
<body>
  <center>paragraph example</center>
</body>
</html>

Or if you don’t want your CSS to be in your HTML, make styles.css:

div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 100px;
  margin-left: 100px;
  background-color: pink;
}

body {
  background-color: darkslateblue;
}

You could have a stylesheet names style.ccs, or something else, so make sure you have the correct name.