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

HTML-CSS
1

Tell us what’s happening:

No matter what I try I cannot get the underline off the links or change the colour of any of the pseudos.

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>
<ul class="todo-list">
   <li>
       <input type="checkbox" id="task-1">
       <label for="task-1">Feed all the animals</label>
       <ul class="sub-item">
           <li><a class="sub-item-link" href="https://freecodecamp.org" target="_blank">Animal Supplies</a></li>
       </ul>
   </li>
   <li>
       <input type ="checkbox" id="task-2">
       <label for="task-2">Practice your concert piece</label>
       <ul class="sub-item">
           <li><a class="sub-item-link" href="https://freecodecamp.org" target="_blank">Tchaikovsky Concerto in D</a></li>
       </ul>
   </li>
   <li>
       <input type="checkbox" id="task-3">
       <label for="task-3">Have a bath</label>
       <ul class="sub-item">
           <li><a class="sub-item-link" href="https://freecodecamp.org" target="_blank">Shampoo and Shower Gels</a></li>
       </ul>
   </li>
   <li>
      <input type="checkbox" id="task-4">
      <label for="task-4">Meet up with friends</label>
      <ul class="sub-item">
          <li><a class="sub-item-link" href="https://freecodecamp.org" target="_blank">Restaurants</a></li>
      </ul>
    </li> 
</ul>
</body>

</html>

/* file: styles.css */
{
  text-decoration-line: none !important;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

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

1 Like
2

@deezerules Your CSS has no selector, so it doesn’t apply.

3

have you linked the css file in your html?