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

Programming HTML-CSS
1

Tell us what’s happening:

After I run the css rule a{text-decoration:none;} , still the error persists: “14.the links on the page should have no underline by default”

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 class="todo-item">
            <input type="checkbox" id="linkedin">
            <label for="linkedin">Find Me on LinkedIn</label>
            <ul class="sub-item">
                <li><a href="www.google.com" target="_blank" class="sub-item-link">Linke LinkedIn</a></li>
            </ul>
        </li>
        
        <li class="todo-item">
            <input type="checkbox" id="linkedin">
            <label for="linkedin">Find Me on LinkedIn</label>
            <ul class="sub-item">
                <li><a href="www.google.com" target="_blank" class="sub-item-link">Linke LinkedIn</a></li>
            </ul>
        </li>

        <li class="todo-item">
            <input type="checkbox" id="linkedin">
            <label for="linkedin">Find Me on LinkedIn</label>
            <ul class="sub-item">
                <li><a href="www.google.com" target="_blank" class="sub-item-link">Linke LinkedIn</a></li>
            </ul>
        </li>

        <li class="todo-item">
            <input type="checkbox" id="linkedin">
            <label for="linkedin">Find Me on LinkedIn</label>
            <ul class="sub-item">
                <li><a href="www.google.com" target="_blank" class="sub-item-link">Linke LinkedIn</a></li>
            </ul>
        </li>
        
    </ul>
</body>

</html>

/* file: styles.css */
.todo-list {
    list-style-type: none;
}

.sub-item-link {
    text-decoration: none;
}

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

.sub-item-link{
    text-decoration: none;
}

a:link {
    color: #000;
}

a:visited {
    color: darkolivegreen;
}

a:hover {
    color: green;
}

a:active {
    color: darkgreen;
}

a:focus {
    outline: 2px solid #000;
    
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list
https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list

2

there is some duplicate code in css but I ran out of options after trying for several hours…

3

I don’t see this rule in your stylesheet.

4

.sub-item-link {
text-decoration: none;
}

with higher specificity

5

when I test in the browser Chrome the css rule is applied

6

You used the type selector to handle :link, :visited, :hover, :active, and :focus states so that the styles would be applied to your links regardless of the class or id attributes applied to them. The same logic would apply to the text-decoration. In this case, you want the broader coverage of a type selector.

7

literally I give up , i do not understand the error

8

Please re-read the instructions again. Pay careful attention to the “Note” and the first bulleted item in User Story #3.

10

try adding something blatant like body {background-color: pink}, is it being applied to your code?

if not, double check everything. like, how do you link the stylesheet to the html file? are you doing it correctly?

11

thank you <3 that was the problem indeed