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

HTML-CSS
1

Tell us what’s happening:

Failing step 15. “Unclicked links should have a color of your choice.”

I tried:
a {text-decoration: none; color: blue;}
This didn’t work, so I tried the color green to do a different color other than the default.
a{text-decoration: none; color: blue;}
Any help is appreciated.
Thanks, Caden

Your code so far

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

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

<body>
    <main>
        <h1> To-Do List</h1>
<ul class="todo-list">
    <li>
        <input type="checkbox" name="tasks" id="clean">
        <label for="clean"> Clean a folder on your computer you haven't touched in a year</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="example.com" target="_blank">Folder</a>
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="tasks" id="story">
        <label for="story"> Write a one-paragraph story where the main character never speaks</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="docs.new" target="_blank">Write story here</a>
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="tasks" id="shortcut">
        <label for="shortcut"> Learn a new keyboard shortcut</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="shortcuts.com" target="_blank">Learn Keyboard Shortcuts here!</a>
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="tasks" id="draw">
        <label for="draw"> Draw something using only straight lines</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="paint.com" target="_blank">Paint</a>
            </li>
        </ul>
    </li>
</ul>
</main>
</body>

</html>

/* file: styles.css */
a {text-decoration: none; color: green;}
a:hover {color: red; text-decoration: underline;}
a:visited {color: purple;}
a:focus {
  outline: none;
  border: 2px solid orange;
  border-radius: 5px;
}
a:active {color: yellow;}
main {
  background-color: #1ac97a;
  padding:20px;
  border-radius:15px;
}
.todo-list > li {
  border: 2px solid black; 
  border-radius: 8px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 20px;
  background-color: #7e99b4;
  list-style-type: circle;
}
h1{
  text-align: center;
  font-family: sans-serif, Arial;
}

Your browser information:

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

Challenge Information:

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

2

is there a specific selector for unclicked links?

3

Should there be? I guess I don’t recall any selectors…

Is it

a:link
4

go back to the lesson immediately before this about link states

5

I see. So a:link is correct. I presume i would need both

a{text-decoration: none;}

along with

a:link{color: blue;}

Is this correct?

6

what do the tests say about that?