Ordered List Styling

[00:00:00]
>> The last thing I wanna do is let's just take a quick look at ordered lists. So we talked about ordered lists earlier, we talked about some attributes that can be used to restyle the actual numbers that are there on the ordered list. You can do similar things here.

[00:00:13]
So, for example, Down here into my ordered list, .ordered, we can say list-style-type. So there are some values that go specifically with the ordered lists. Then we could say, upper-roman. That'll give us roman numerals, right? We could also do other various things here if we wanted to once again with nth child, so we could say, ordered li:nth-child, let's say, 1.

[00:00:56]
Here's a case for actually using real numbers. List- style-type:. Once again, we can go to our our emoji and we can choose the emoji guys here. Right, so now my first child, I could also have said li:first-child, that would work also. That will always put the emoji number one next to my first thing on the list.

[00:01:32]
And then we could set up a whole series of these so that we can have two, three, four, five, and all of the other emoji numbers that are there, makes sense? Okay, it's just some ideas for how you can switch up those list styles. By the way, you can always also still do, and I'll just put it in here as a separate item, Let's do unordered li:last-child.

[00:02:04]
You could always do this, list-style-type: none. There we go. So you could always make them disappear, too, if you don't want them, right? list-style-type of none makes them all go away. They will still be indented because your list has either margin or padding, which it inherits from the browser's style sheet.

[00:02:34]
So if you want it to be all the way over to the side here, I would recommend you set your padding to 0 and your margin to 0. And we probably have to put that, On the unordered list itself in order for it to work. That pushes those icons off the page, because now we've gotten rid of the margin and the padding, right?

[00:03:05]
Some browsers do it with padding, some browsers do it with margin. This is one of the reasons that you would use a normalized style sheet or a reset style sheet. Because then all the browsers are using whatever that styles heet calls for, whether it's margin or padding.