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

HTML-CSS
1

Tell us what’s happening:

my css are not working. test #14 and beyond not passing.

I tried with “a” (anchor) type selector but trying with class selectors didn’t help either.

I googled and tried the suggested sequence for anchor pseudo-class (lvha) but that did not work either.

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="1"></input>
            <label for="1">Cappucino</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://www.google.com/search?q=cappuccino" target="_blank" >Cappuccino</a>
                </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="2"></input>
            <label for="2">Americano</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://www.google.com/search?q=americano" target="_blank">Americano</a>
                </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="3"></input>
            <label for="3">French Press</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://www.google.com/search?q=french+press" target="_blank">French Press</a>
                </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="4"></input>
            <label for="4">V60</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://www.google.com/search?q=v60+coffee" target="_blank">V60</a>
                </li>
            </ul>
        </li>

    </ul>
</body>

</html>

/* file: styles.css */
a {
  text-decoration: none;
}

a:link {
  color: #000080;
  text-decoration: none;
}

a:visited {
  color: pink;
}

a:hover {
  color: maroon;
}

a:focus {
  outline: 2px solid white;
}

a:active {
  color: gold;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

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

2

If none of your CSS is working at all, there must be something that’s preventing it from running at all.

What do you need to do to have your CSS file affect your HTML?

3

awesome !!. just figured out the most fundamental thing I missed :). ?

1 Like
4

@pkdvalis thanks, it worked.

1 Like
5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.