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

HTML-CSS
1

Tell us what’s happening:

For some reason , the system is not acknowledging the part where the links in the page should have no underline by default. I tried using !important and even putting all the pseudo selectors at once and giving them a text decoration of none but it is not working.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>To do list</h1>
<section>
    <ul class="todo-list">
       <li> <input type="checkbox" id="eat" name="eat" value="eat"><label for="eat">eat</label>
       <ul class="sub-item">
<li class="sub-item-link"><a href=" " alt="pud" target="_blank" class="sub-item-link">List of food you are to take</a></li>
       </ul>
       </li>
      <li>
       <input type="checkbox" id="sleep" name="sleep" value="sleep"><label for="sleep">sleep</label>
       <ul class="sub-item">
<li class="sub-item-link"><a href=" " alt="pud" target="_blank" class="sub-item-link">Survey of your sleep from the past year.</a></li>
       </ul>
       </li>
       </li>
       <li>
       <input type="checkbox" id="code" name="code" value="code"><label for="code">code</label>
       <ul class="sub-item">
<li class="sub-item-link"><a href=" " alt="pud" target="_blank" class="sub-item-link">languages you have to study</a></li>
       </ul>
       </li></li>
       <li>
       <input type="checkbox" id="repeat" name="repeat" value="repeat"><label for="repeat">repeat</label>
       <ul class="sub-item">
<li class="sub-item-link"><a href=" " alt="pud" target="_blank" class="sub-item-link">or you could do this instead.</a></li>
       </ul>
       </li></li>
    </ul>
</section>
</body>

</html>

/* file: styles.css */
.todo-list{
  list-style-type:none;
}
.sub-item-link:link{
  text-decoration:none !important;
  color:grey;
}
.sub-item-link:hover{
  color:purple;
  font-family:sans-serif;
}
.sub-item-link:active{
  color:black;
}
.sub-item-link:visited{
  color:burlywood;
}
.sub-item-link:focus{
  outline:2px solid blue;
}

.sub-item-link:link,
.sub-item-link:visited,
.sub-item-link:hover,
.sub-item-link:active,
.sub-item-link:focus {
  text-decoration: none !important; 
}

Your browser information:

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

Challenge Information:

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

2

by default it means you should not using any pseudoselector to change that

1 Like