This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we’ll cover the different ways we can use list properties to control the appearance of our lists.
Quick Reference
list-style-type
Sets the appearance of a list item.
list-style-position
Sets the position of a list marker in a list item. By default, the browser displays the list markers outside the list items.
list-style
The shorthand property for setting list-style-type, list-style-image and list-style-position.
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
You need to sign up for Treehouse in order to download course files.
Sign up