Build A Stylized To-Do List

HTML-CSS
1

I’ve been staring at this code for several hours now, not to mention looking stuff up and comparing with other coders’ versions on the forum. It seems the CSS file is not linking to the HTML file, though I’ve decuple-checked my link element and its rel attribute. No changes I make in the CSS file alter the styling. Perhaps it is a specificity issue, but there are no other styling elements in the code. I checked if the ID of the parent figure element would prevent styling to my anchor class elements, the web said it shouldn’t. Summoning tech gurus! Help me :confused:

My HTML:

<!DOCTYPE html>
<html lang="en">

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

<body>
    <ul class="todo-list">

        <li>
            <input type="checkbox" id="skateboarding"></input>
        <label for="skateboarding">Skateboarding</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="cats.com" target="_blank">Skateboarding</a>
            </li>
        </ul>
        </li>

        <li>
            <input type="checkbox" id="clouds"></input>
        <label for="clouds">Clouds</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="cats.com" target="_blank">Cloud-watching</a>
            </li>
        </ul>
        </li>

        <li>
            <input type="checkbox" id="music"></input>
        <label for="music">Music</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="cats.com" target="_blank">Playing music</a>
            </li>
        </ul>
        </li>

        <li>
            <input type="checkbox" id="snuggles"></input>
        <label for="snuggles">Snuggles</label>
        <ul class="sub-item">
            <li>
                <a class="sub-item-link" href="cats.com" target="_blank">Snuggling</a>
            </li>
        </ul>
        </li>
    </ul>
</body>

</html>

CSS:

.sub-item-link:link {

text-decoration: none;
}

.sub-item-link:visited  {

color: mediumvioletred;
}

.sub-item-link:hover {

color: magenta;
}

.sub-item-link:focus {

border: dashed 1px plum;
}

.sub-item-link:active {

color: darkmagenta;
}
3

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

you do have a mistake here still.
Can you try to google what a link element looks like and see if you can find the mistake?
Something like the following: html link element on google and compare the results to your attempt.