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

HTML-CSS
1

Tell us what’s happening:

I cannot figure out the last few CSS rules;
Failed: 14. The links on the page should have no underline by default.
Failed: 15. The links should change color when hovered over.
Failed: 16. The links should change color when they are being clicked.
Failed: 17. The links should have an outline when focused.
Failed: 18. The links should change color once visited.

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>
    <h1>My Stylized To-Do list</h1>
   <ul class="todo-list">
       <li>
          <input type="checkbox" id="task1" />
          <label for="task1">Learn HTML</label>
          <ul class="sub-item">
          <li><a class="sub-item-link" href=href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">Leaern HTML</a></li>
          </ul>
       </li>

       <li>
       <input type="checkbox" id="task2" />
       <label for="task2">Practice licking your elbow</label>
       <ul class="sub-item">
       <li><a class="sub-item-link" href="https://css-tricks.com/" target="_blank">CSS Tricks</a></li>
       </ul>
       </li>
       <li>

       <li>
        <input type="checkbox" id="task3" />
        <label for="task3">Master Javascript</label>
        <ul class="sub-item">
        <li><a class="sub-item-link" href="https://javascript.info/" target="_blank">JS Guide</a></li>
        </ul>
        </li>

        <li>
        <input type="checkbox" id="task4" />
        <label for="task4">Explore Cybersecurity</label>
        <ul class="sub-item">
            <li><a class="sub-item-link" href="https://owasp.org/" target="_blank">OWASP</a></li>
        </ul>
      </li>
    </ul>
</body>

</html>

/* file: styles.css */
/* General page styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
    padding: 20px;
}

#main {
    background-color: darkolivegreen;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border: solid 3px mintcream;
    border-radius: 10px;
}

h1 {
    color: #333;
    text-align: center;
    margin: 20px;
    padding:5px;
}

a {
    text-decoration: none;
    color: rgb(51, 108, 155)
}

/* Todo list styling */
.todo-list {
    list-style-type: none;
    padding-left: 0;
}

.todo-list > li {
    margin-bottom: 20px;
    margin-right: 40px;
    padding: 5px;
    border: dotted 3px ivory;
    bored-radius: 10px;
    background-color: rgb(237, 243, 238);

}

/* Sub-item list styling */
.sub-item {
    list-style: none;
    padding-left: 20px;
    margin-top: 5px;
}

a {
    text-decoration:none;
}


.sub-item-link:visited {
    color: #6a0dad;        /* visited color */
}

.sub-item-link:focus {
    outline: 3px solid #00b894; /* focus outline */
    outline-offset: 2px;
}

.sub-item-link:hover {
    color: #e67e22;        /* hover color */
}

.sub-item-link:active {
    color: #d50000;        /* clicked color */
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0

Challenge Information:

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

2

Welcome to the forum @iamgeetarted

How does the HTML access the CSS file?

Happy coding