Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

my styling codes are not going through, what’s wrong here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>

<body>
<div id="main">
<h1>My Todo-list</h1>
<ul class="todo-list">
    <li>
        <input type="checkbox" id="relax"/>
        <label for="relax">Relax</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="https://www.google.com" target="_blank">Take a nap</a>
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" id="exercise"/>
        <label for="exercise">Exercise</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="https://www.google.com" target="_blank">couple of workout routines</a>
            </li>
       </ul>
    </li>
    <li>
       <input type="checkbox" id="check mails"/>
       <label for="check mails">Check Mails</label>
       <ul class="sub-item">
           <li>
               <a class="sub-item-link" href="https://www.google.com" target="_blank">going through my email</a>
          </li>
     </ul>
  </li>
  <li>
     <input type="checkbox" id="watch movies"/>
     <label for="watch movies">Watch Movies</label>
     <ul class="sub-item">
         <li>
             <a class="sub-item-link" href="https://www.google.com" target="_blank">surfing netflix</a>
        </li>
 </ul>
 </li>
 </div>



</body>

</html>

/* file: styles.css */
/* file: styles.css */
ul {list-style: none;    
  padding: 0;
  margin: 0;}
a{text-decoration: none;}
.sub-item{border: 1px solid #333;}
.sub-item-link:unvisited{color: orange;}
.sub-item-link:visited{color: blue;}
.sub-item-link:hover{color:green;}
.sub-item-link:active{color:brown;}
.sub-item-link:focus{outline:2px solid black;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

Welcome to the forum @alliluqmanadeniyi !

Something important is missing from your <head> element.
Do you remember how to make a relationship between a HTML and a CSS file?

hint

3

what could that be ?

4

External CSS is written in a separate .css file and linked to the HTML document using the link element in the head section.

You can find the syntax for the link here:

What Is CSS? - What Are Inline, Internal, and External CSS, and When Should You Use Each One? | Learn | freeCodeCamp.org

5

yeah got it , thanks