Lists

Quick reference

• 00:04 >> Okay, in this video, I wanna talk about list and here is a basic list.
• 00:09 And this is an ordered list because we have numbers.
• 00:11 So if we come back here i just made this really quickly,
• 00:13 this is the HTML to create an ordered list.
• 00:16 It's just ol, and each list elements has one of this li's in it.
• 00:19 So we can style all of these things with CSS.
• 00:22 So let's come down here and we start out with an ol, and
• 00:26 lets open and close this, and we can do all kinds of things.
• 00:29 Let's give this a background of, lets say what, CCCCCC, kind of like that one.
• 00:37 And so now this whole thing, we get a background of this gray thing here.
• 00:40 We can do all the things we've done in the past.
• 00:43 We can give this a padding of different things.
• 00:49 Or we could give it a background image, we can do a border, all the things,
• 00:53 margin, all of the different CSS we've learned so far, we can do that.
• 00:57 So, that's for the actual list itself, the entire thing.
• 01:01 But each one of these li's, we can style as well.
• 01:04 So to do that, we just go lol, and then a space and then li.
• 01:10 And now, whatever we do, boy I don't know, let's say white.
• 01:15 Give this a white background.
• 01:17 The actual li's can change.
• 01:19 And just like the ol, you can do anything.
• 01:21 You can do, give this padding.
• 01:27 Whatever we want, so that's very, very cool.
• 01:30 Now that's an ordered list.
• 01:31 We can also do an un-ordered list, which is just instead of ol, it's ul.
• 01:36 o stands for ordered, u stands for un-ordered.
• 01:39 If we come back here, boom the numbers disappear and the dots stay the same.
• 01:43 But all of our formatting has disappeared.
• 01:45 Well that's because our CSS, we created an ol, we didn't do a ul.
• 01:51 So if I change this ol to a ul.
• 01:53 In fact, in reality, you wouldn't change it,
• 01:55 you would just create another one underneath it.
• 01:58 But to save time, I'm just gonna change it.
• 02:00 Boom, so we get the same exact thing.
• 02:01 Change this to 20 so it's easier to look at.
• 02:04 There we go.
• 02:05 So very, very cool.
• 02:06 So we can also change the type of list, li thing.
• 02:11 We have a little dot now.
• 02:12 We can change that.
• 02:12 So let's come down here and we can pick,
• 02:15 shall we just go list-style-type and give it a type.
• 02:19 So let's say, square.
• 02:21 Now you can do square, you can do disc, and you can do circle.
• 02:24 We save this, hit reload, boom, now these little things become squares.
• 02:28 Likewise, we can do circle.
• 02:29 Let's just say the disc is the default, so
• 02:32 we've already looked at disc, those are circles.
• 02:36 And let's change this back to an ordered list, oops.
• 02:43 And change our ul to ol, save this.
• 02:49 So the types for order list because they're numbers obviously,
• 02:53 we can change this to upper-Roman.
• 02:56 Remember when you're a kid in English class and
• 02:58 you had to create outlines, it's Roman numerals?
• 03:02 So we can do that, we can do lower-Roman.
• 03:07 Now they become lowercase, kinda cool.
• 03:09 We can do upper alpha.
• 03:12 And that changes it to letters, uppercase letters,
• 03:19 A B C D or we can do lower alpha, Save this.
• 03:26 Boom, lowercase.
• 03:27 So all kinds of cool stuff, you can do with the li thing.
• 03:30 You can have Iist type of none, see how that looks like.
• 03:38 Boom, and now they disappear.
• 03:39 Why would you want that?
• 03:40 Lots of reasons you might want that.
• 03:41 A lot of nav bars at the top will use li elements and
• 03:44 you don't want a little dot next to a thing in a nav bar.
• 03:48 But you still want to be able to do CSS on them and
• 03:51 li tags allows you to do a whole lot of CSS on them.
• 03:54 So, we'll learn more about that later.
• 03:55 But this is how to style lists, ordered lists, unordered lists.
• 03:59 And that's all for this video.

Lesson notes are only available for subscribers.