Lists

So, let's quickly cover the different ways we can use list properties to control 0:00 the appearance of our ordered and un-ordered lists. 0:04 So, list elements display certain browser styles by default. 0:08 Un-ordered list typically display a bullet or solid dot, and ordered list usually 0:12 display a number, so that's what they're currently displaying in our design. 0:19 But we can change the list markers, using the list style type property. 0:24 So with list style type we can add any type of list marker to either ordered or 0:30 unordered list. 0:36 So back in our style sheet. 0:37 Let's stroll down and add a new rule that targets our un-ordered list. 0:39 So, right beneath the image rule, let's select our un-ordered list on the page 0:45 by typing ul, and let's give it the list style type property. 0:51 And as the list-style-type value, let's try a value of square. 1:00 So let's save our style sheet, and when we refresh the page, 1:06 there we're able to see the new square markers in our unordered list. 1:11 The list style type property can accept values ranging from disk, circle or 1:16 square to other values like lower Roman, lower Greek and lots more. 1:21 You can actually see all the values in the MDN doc for list style type. 1:26 And if we're not feeling any of the list style type values or 1:33 if we simply need to turn them off, we can always set the list-style-type value 1:36 to none which as we can see turns the list markers off. 1:43 They're now gone in our unordered list. 1:47 But in our design we're gonna go ahead and keep the default disk list style. 1:50 [BLANK_AUDIO] 1:55 Now, the same applies to our ordered lists. 1:59 So let's target the ol element in our page by changing the ul to ol. 2:02 And let's add the list-style-type property once again. 2:09 And this time, we're gonna make the value decimal leading zero. 2:15 So when we add the decimal leading zero value, 2:23 notice how it adds a zero before each number in our ordered list. 2:27 So next we're also able to set whether or 2:34 not we want the list markers to appear inside or outside a div element. 2:36 So for instance, let's go back to our style sheet and let's remove this ol 2:41 rule and let's target all list items on the page with the li selector and 2:46 if we give every list item a border style so let's say one pixel, solid black. 2:51 When we save our style sheet and refresh the page, notice that, 3:00 by default, the browser displays the list markers outside the list items. 3:04 They sit to the left of the text, and they appear outside the content flow. 3:10 But, we're also able to change the position of the list style, 3:15 with the list style property. 3:19 So, let's go back to our style sheet. 3:21 And now let's target both lists, so above the li selector, 3:23 let's target the ul element, and let's also target the ol element. 3:28 And, in the rule, we're going to add the list-style-position property. 3:34 And when we add the value inside and take a look at our layout once again. 3:42 So now our list markers are inside the content flow of our list. 3:48 So lists, by default, 3:54 are indented into the page with left padding, as we're seeing here. 3:55 Now, if we want to change or remove that indented space so that our list items 4:00 are left-aligned with the content, we can set a list left padding style to zero. 4:05 So, to remove the default indentation, let's go back to our style sheet. 4:12 And in our ul and ol rule, let's add a padding left property. 4:16 And set the value to zero. 4:23 And when we do that, 4:25 notice how the content in our list is now left aligned with the rest of the content. 4:27 Now, keep in mind that older versions of IE control list 4:33 indentation using a left margin instead of left padding. 4:36 So, just in case, let's go back to our ul and 4:39 ol rule and let's include a margin-left value of zero. 4:43 And we also want to keep the list style position outside, so let's go ahead and 4:50 remove this list style position declaration. 4:54 And finally, let's go down to our li rule and 4:57 let's increase the vertical gaps between the list items. 5:00 Now, we can do that with a bottom margin. 5:04 So let's remove this example border style and 5:06 we're going to replace it with a margin bottom property. 5:09 And let's set the margin bottom value to ten pixels. 5:14 So when we save and refresh the page, that looks much better. 5:18 Now remember, list markers appear outside the content flow by default. 5:23 So now that we set it back to the default of outside that's why 5:27 they're over here towards the left margin, or sort of out dented. 5:31 So, that's completely normal. 5:34 So finally, let's give both lists a top and bottom margin. 5:37 To give them a little more separation from the content above and below. 5:41 And I'm also kind of liking that default left indentation. 5:45 So let's go back and remove the padding-left zero declaration. 5:49 By all means keep it in your layout if you like it. 5:54 And let's change the margin left property to the shorthand margin property. 5:57 And this time we're gonna set the top and 6:02 bottom margin to 30 pixels and the left and right margins to zero. 6:05 All right. So let's take a look. 6:10 I think this looks much better. 6:13 Let's go ahead and stick with that. 6:15