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

HTML-CSS
1

Tell us what’s happening:

Hi everybody,
I have a problem with steps 2 and 13. Can’t quite figure out how to set the default settings. Please help.

Thank you

Your code so far

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

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

<body>
    <p>Most common flowers types.<p>
    <ul class="todo-list">
        <li input="roses" id="roses">
            <label for="roses">Roses</label>
            <ul class="sub-item">
                <li> <p>There is thousads diferent<a class="sub-item-link" href="https://www.pexels.com/photo/selective-focus-photography-of-a-red-rose-593655/" target="_blank"> roses</a> in the world.</p>
                    
                </li>
            </ul>
          <input type="checkbox" id="roses" name="roses" value="roses" />

        </li>
        <li input="peony" id="peony">
            <label for="peony">Peony</label>
            <ul class="sub-item">
                <li> <p>There is thousads diferent <a class="sub-item-link" href="https://www.pexels.com/photo/close-up-photography-of-pink-petaled-flower-773256/" target="_blank">peonyes</a> in the world.</p>
                    
                </li>
            </ul>
          <input type="checkbox" id="peony" name="peony" value="peony" />

        </li>
        <li input="orchid" id="orchid">
            <label for="orchid"> Orchid</label>
            <ul class="sub-item">
                <li> <p>There is thousads diferent <a class="sub-item-link" href="https://www.pexels.com/photo/pink-moth-orchids-669246/" target="_blank">orchids</a> in the world.</p>
                    
                </li>
            </ul>
          <input type="checkbox" id="orchid" name="orchid" value="orchid" />  

        </li>
        <li input="lily" id="lily">
            <label for="lily">Lily</label>
            <ul class="sub-item">
                <li> <p>There is thousads diferent <a class="sub-item-link" href="https://www.pexels.com/photo/close-up-photography-of-pink-lily-flower-1569108/" target="_blank">lilys</a> in the world.</p>
                    
                </li>
            </ul>
          <input type="checkbox" id="lily" name="lily" value="lily" /> 
        </li>
    </ul>

</body>

</html>

/* file: styles.css */

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
      color: green;
}
      

a:hover {
      text-decoration: none;
      color:pink;
}

a:active {
      text-decoration: none;
      color: red;
}
a:focus {
  outline:2px solid violet;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

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

2

Hi @nferati

  1. You should remove the default list style from your .todo-list .

Start by adding the .todo-list selector.

Then search online for default list style to find the property and value to use.

Happy coding

1 Like