Merged post - Build a Stylized To-Do List - Build a Stylized To-Do liststyle a list issue

HTML-CSS
41

hi. doing the build a stylise list. now found the html and found that and that works fine. now doing the css. now not liking the underline. so how to fix or what stupid thing am i doing wrong? totally blind and use a screen reader, so cannot see. so, can you help me out to get this working fine.
will paste the error message and my css code.
marvin.
Failed:14. The links on the page should have no underline by default.

body {
    list-style-type: square;
}

a: {
    color: blue;
    text-decoration: none;
}

a:visited {
    color: purple;
}

            a:hover {
        color: lightpink;
    }

    a:active {
        color: red;
    }

    a:focus {
        outline: solid;
        color: plumb;
    }
42

Hi. Please can you not create duplicate posts for the same challenge. I have merged your post. Please can you also post all your latest HTML as well. Put 3 backticks before and after.

43

What issue are you having with the user story " You should have one unordered list with the class todo-list.", what part of it do you not understand that you need to ask for clarification of what it says?

44

a is an element selector, just like body. How are those two selectors different in your CSS?

45

hi. okay so trying to do the lab and it is not liking my text decoration and it is not liking that. so doing the style a do list. and so got the html and the css. so will paste the error and my css.
so how to get this to pass.
is it a bug? or am i doing the wrong code.
will paste below.
will wait for your reply.
marvin.
ps: pasting below.

Failed:14. The links on the page should have no underline by default.. so

body {
    list-style-type: square;
}

    a: link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: green;
  text-decoration: none;
}

a:hover {
  color: hotpink;
  text-decoration: none;
}

a:active {
  color: blue;
  text-decoration: none;
}

a:focus {
  outline: 2px solid orange;
  text-decoration: none;
}
46

You added text-decoration: none; to all link states, but the test looks for a single selector that matches all links on the page, regardless of their state.

47

hi. okay heres the page and the errors and my improved code. why? what am i missing? how to get this to work? what other code do i need to put in the css. thank you for your help.
marvin.
Skip to content

Menu
Profile

  1. Certified Full Stack Developer Curriculum
  2. Build a Stylized To-Do List

Instructions

index.htmlEditorstyles.cssEditor

ConsoleHide the previewPreviewMove the preview to a new window and focus it

Build a Stylized To-Do list

Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

In this lab, you will practice the different styles that can be applied to links when they are hovered over, focused, clicked, and visited.

Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

  1. You should have one unordered list with the class todo-list.
  2. Inside the unordered list, you should have four list items.
  3. Inside each list item, there should be:
  • An input element with the type checkbox and id set to a unique value.
  • A label element with the for attribute set to the corresponding input element’s id.
  • An unordered list with the class sub-item.
  • A list item with an anchor element in it. The anchor should have the class sub-item-link, a valid href value, and a target value that makes the link open in a new tab.
  1. Your anchor elements shouldn’t have any default text decoration.
  2. You should set the text color of the links to a color of your choice.
  3. When your links are visited, the color should change to another color of your choice.
  4. When your links are hovered over, the color should change to another color of your choice.
  5. When your links are focused, there should be a colored outline around the link.
  6. When your links are clicked, the color should change to another color of your choice.

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

Run the Tests (Ctrl + Enter)Reset this lesson

Get Help

Tests

  • Passed:1. You should have one unordered list with the class todo-list.

  • Passed:2. You should have four list items inside the unordered list.

  • Passed:3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.

  • Passed:4. The li inside the ul with the class todo-list should contain a label element.

  • Passed:5. All input elements should have an id.

  • Passed:6. All label elements should have a for attribute.

  • Passed:7. All label elements should have some text.

  • Passed:8. The id and for attributes of the input and label elements pairs, should have corresponding values.

  • Passed:9. After the label elements, there should be an unordered list with the class sub-item.

  • Passed:10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

  • Passed:11. All anchor elements should have a valid href attribute.

  • Passed:12. All anchor elements should have text.

  • Passed:13. Each a element should have a target attribute with the value of _blank.

  • Failed:14. The links on the page should have no underline by default.

  • Passed:15. The links should change color when hovered over.

  • Passed:16. The links should change color when they are being clicked.

  • Passed:17. The links should have an outline when focused.

  • Passed:18. The links should change color once visited.

32

33

34

35

do-list#"

target="_blank">View

Model Number</a></

li>

</ul></li>

</body>

</html>

19

20

21

22

23

24

25

26

color: blue;

}

a:focus {

outline: 2px

solid orange;

}

body {

// running tests 14. The links on the page should have no underline by default. // tests completed\

body {
    list-style-type: square;
}

    a: link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: green;
  }

a:hover {
  color: hotpink;
  }

a:active {
  color: blue;
  }

a:focus {
  outline: 2px solid orange;
  }
48

You’re close to it now, one thing to note.

The text-decoration: none; is currently inside the a:link selector, but the :link pseudo-class only targets links that haven’t been visited.

Think of one selector that matches all links on the page.

49

This is a duplicate post, you have been asked to not create duplicate posts, it is against the rules.

50

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