When you used a reset file, you lost the browsers’ default style for lists. Your ordered lists no longer were numbered; your unordered lists were no longer lined with bullet points. You can put those things back, or you can do better.
To style the list elements, you need to select the list elements. If you have more than one type of list on your page, or what your different lists styled differently, then select the <li> elements just for the list you want the style to apply to. You could use this to number an ordered list. What is it saying?
ol li {
list-style-type: decimal;
padding: 5px;
}
This selects the list elements in any ordered list on the page. It gives it a decimal type of style and pads each item in the list to space them out from each other. It would come out a little like this.
- First item
- Second item
You can search online for different types. You can choose to have roman as your style and use roman numerals. You can style the font and size of what you add.
For an unordered list, a traditional way to style it would be with bullet points.
ul li {
list-style-type: square;
padding: 5px;
}
That selects all the list items, lines labeled with the <li> tag that are inside an unordered list and gives them a little square before them and a little space in between. It would come out a little like this.
- First item
- Second item
You can use an image for the bullet point. Make sure it’s a tiny picture, but things like a little checkmark would go well with a checklist!
li {
list-style-image: url(“../images/list-image.jpg”)
}
You use quotation marks and parentheses. That puts the picture in front of each list item, just like the numbers and bullet points.
You can search online for more ideas of how to creatively number and decorate your lists.
You can see the video of the lesson.