So, let's quickly cover the different ways we can use list properties to control

the appearance of our ordered and un-ordered lists.

So, list elements display certain browser styles by default.

Un-ordered list typically display a bullet or solid dot, and ordered list usually

display a number, so that's what they're currently displaying in our design.

But we can change the list markers, using the list style type property.

So with list style type we can add any type of list marker to either ordered or

unordered list.

So back in our style sheet.

Let's stroll down and add a new rule that targets our un-ordered list.

So, right beneath the image rule, let's select our un-ordered list on the page

by typing ul, and let's give it the list style type property.

And as the list-style-type value, let's try a value of square.

So let's save our style sheet, and when we refresh the page,

there we're able to see the new square markers in our unordered list.

The list style type property can accept values ranging from disk, circle or

square to other values like lower Roman, lower Greek and lots more.

You can actually see all the values in the MDN doc for list style type.

And if we're not feeling any of the list style type values or

if we simply need to turn them off, we can always set the list-style-type value

to none which as we can see turns the list markers off.

They're now gone in our unordered list.

But in our design we're gonna go ahead and keep the default disk list style.

[BLANK_AUDIO]

Now, the same applies to our ordered lists.

So let's target the ol element in our page by changing the ul to ol.

And let's add the list-style-type property once again.

And this time, we're gonna make the value decimal leading zero.

So when we add the decimal leading zero value,

notice how it adds a zero before each number in our ordered list.

So next we're also able to set whether or

not we want the list markers to appear inside or outside a div element.

So for instance, let's go back to our style sheet and let's remove this ol

rule and let's target all list items on the page with the li selector and

if we give every list item a border style so let's say one pixel, solid black.

When we save our style sheet and refresh the page, notice that,

by default, the browser displays the list markers outside the list items.

They sit to the left of the text, and they appear outside the content flow.

But, we're also able to change the position of the list style,

with the list style property.

So, let's go back to our style sheet.

And now let's target both lists, so above the li selector,

let's target the ul element, and let's also target the ol element.

And, in the rule, we're going to add the list-style-position property.

And when we add the value inside and take a look at our layout once again.

So now our list markers are inside the content flow of our list.

So lists, by default,

are indented into the page with left padding, as we're seeing here.

Now, if we want to change or remove that indented space so that our list items

are left-aligned with the content, we can set a list left padding style to zero.

So, to remove the default indentation, let's go back to our style sheet.

And in our ul and ol rule, let's add a padding left property.

And set the value to zero.

And when we do that,

notice how the content in our list is now left aligned with the rest of the content.

Now, keep in mind that older versions of IE control list

indentation using a left margin instead of left padding.

So, just in case, let's go back to our ul and

ol rule and let's include a margin-left value of zero.

And we also want to keep the list style position outside, so let's go ahead and

remove this list style position declaration.

And finally, let's go down to our li rule and

let's increase the vertical gaps between the list items.

Now, we can do that with a bottom margin.

So let's remove this example border style and

we're going to replace it with a margin bottom property.

And let's set the margin bottom value to ten pixels.

So when we save and refresh the page, that looks much better.

Now remember, list markers appear outside the content flow by default.

So now that we set it back to the default of outside that's why

they're over here towards the left margin, or sort of out dented.

So, that's completely normal.

So finally, let's give both lists a top and bottom margin.

To give them a little more separation from the content above and below.

And I'm also kind of liking that default left indentation.

So let's go back and remove the padding-left zero declaration.

By all means keep it in your layout if you like it.

And let's change the margin left property to the shorthand margin property.

And this time we're gonna set the top and

bottom margin to 30 pixels and the left and right margins to zero.

All right. So let's take a look.

I think this looks much better.

Let's go ahead and stick with that.