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

HTML-CSS
1

Tell us what’s happening:

why after following all required still all CSS codes get fail while all html gets right

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>
 <!DOCTYPE html>
<html lang="en">

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

<body>
 <h1>My To-Do List</h1>
  <ul class="todo-list" class="sub-item">
      <li><label for="checkbox">Wake up in the morning</label><ul class="sub-item"><li> <a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="_blank">benefits for waking up in the morning</a></li>
      <li><label for="checkbox">Doing sports</label><ul class="sub-item"><li> <a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="_blank">benefits for practising sports</a></li>
      <li><label for="checkbox">eating healty breakfast</label><ul class="sub-item"><li> <a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="_blank">what you should eat in the morning</a></li>
      <li><label for="checkbox">see beautiful views</label><ul class="sub-item"><li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="_blank">benefits for spending good times on your body</a></li>
  </ul>
</body>

</html>
</body>

</html>

/* file: styles.css */
.todo-list {
 list-style-type: none;
}
/* no underline by default */
a {
  text-decoration: none;
}

/* unvisited links */
a:link {
  color: blue;
}

/* visited links */
a:visited {
  color: green;
}

/* hover */
a:hover {
  color: red;
}

/* focus */
a:focus {
  outline: 2px solid green;
}

/* active (clicking) */
a:active {
  color: purple;
}

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

Challenge Information:

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

2

Is any of your CSS affecting the preview of the page?

3

no, i tried even to copy only the html and do reset for the lab itself but the preview showed already without writing any css

4

So if you change something in the CSS does it change on the page?

If you change the background color for example?

5

no, nothing changed with me

6

Can you think of a reason why none of your CSS code would take effect on the page?

7

Look carefully at your HTML. You have duplicate html, head, and body elements. Try removing those.

8

i delete them and yesthey was more than neede but still issues in css the same

9

Please post your updated code.

10 
<meta charset="utf-8">

<title>Styled To-Do List</title>

My To-Do List

      <li><label for="checkbox">Wake up in the morning</label><ul class="sub-item"><li> <a class="sub-item-link" href="https://www.freecodecamp.org" target="\_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="\_blank">benefits for waking up in the morning</a></li>

  <li><label for="checkbox">Doing sports</label><ul class="sub-item"><li> <a class="sub-item-link" href="https://www.freecodecamp.org" target="\_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="\_blank">benefits for practising sports</a></li>

  <li><label for="checkbox">eating healty breakfast</label><ul class="sub-item"><li> <a class="sub-item-link" href="https://www.freecodecamp.org" target="\_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="\_blank">what you should eat in the morning</a></li>

  <li><label for="checkbox">see beautiful views</label><ul class="sub-item"><li><a class="sub-item-link" href="https://www.freecodecamp.org" target="\_blank">mmmm</a></li></ul><input type="checkbox" id="checkbox"><a href="https://www.freecodecamp.org"  target="\_blank">benefits for spending good times on your body</a></li>

/* no underline by default */

a {

text-decoration: none;

}

/* unvisited links */

a:link {

color: blue;

}

/* visited links */

a:visited {

color: green;

}

/* hover */

a:hover {

color: red;

}

/* focus */

a:focus {

outline: 2px solid green;

}

/* active (clicking) */

a:active {

color: purple;

}

11

Please try again.

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 (').

12

How does the browser know where to find the CSS to apply to the HTML file?

1 Like
13

<link href="style.css" rel="stylesheet" />

When you removed the duplicate code, did you keep the head element that included this link element? If so, please double-check the value of your href attribute. Is that the filename of the stylesheet you are using?

1 Like
14

i found that it was deleted yes since i removed the sec ending, thanks really

15

i found it in the end yes you were right and i needed to write it with the missing letter and it`s worked really fine, really thank you