WEBVTT FILE





1
00:00:06.290 --> 00:00:11.150
in this video we're gonna learn how to style lists

2
00:00:11.150 --> 00:00:18.750
first of all let's create a couple of lists in our body element first let's

3
00:00:18.750 --> 00:00:37.969
create a paragraph a list of European capitals now let's create our first list

4
00:00:39.649 --> 00:00:45.590
let's give it a class list one the first one Paris London and then

5
00:00:59.700 --> 00:01:11.460
Madrid okay and this creates a second list right most of us let's give it a

6
00:01:11.460 --> 00:01:22.020
class list too okay so now we want to style the first list so the way to do

7
00:01:22.020 --> 00:01:32.430
that we're gonna specify here that we're selling an unordered list of class list

8
00:01:32.430 --> 00:01:44.970
one okay and then we can use the list style property so list style property

9
00:01:44.970 --> 00:01:50.009
and basically record multiple choices we can choose from so if we select for

10
00:01:50.009 --> 00:01:58.950
instance square then we can see that the list is styled using squares there we

11
00:01:58.950 --> 00:02:10.500
can use other styles we can use for instance little roman numbers you can

12
00:02:10.500 --> 00:02:24.870
see them all so we can use a pyramid numbers as well okay so that's one way

13
00:02:24.870 --> 00:02:30.810
of styling lists using the list style property there is another property that

14
00:02:30.810 --> 00:02:37.290
we can use it's the list style image before before we do that we're gonna

15
00:02:37.290 --> 00:02:44.010
need to use a picture so I'm just gonna add another picture it's a blue square

16
00:02:44.010 --> 00:02:49.940
let's add it to our images folder okay so the new property is list style

17
00:03:00.780 --> 00:03:08.640
image and now we need to specify the URL of the image so it's in images and we

18
00:03:08.640 --> 00:03:14.210
need to choose the blue square picture okay some reason we need to refresh our

19
00:03:21.090 --> 00:03:28.500
live preview to see the change and now you can see thus the the list is styled

20
00:03:28.500 --> 00:03:37.110
using the blue square picture okay now we're gonna style the second list and

21
00:03:37.110 --> 00:03:44.360
this time we want to use the picture again but we want to be able to control

22
00:03:44.360 --> 00:03:53.160
where the picture appears and we want to visit position the picture our way so in

23
00:03:53.160 --> 00:04:02.040
order to do that first of all we're gonna style the lists itself so we are

24
00:04:02.040 --> 00:04:12.900
styling the unordered list of class list too okay so first we need to set the

25
00:04:12.900 --> 00:04:20.419
list style to none and the reason we want to do that is because we want to

26
00:04:20.419 --> 00:04:32.490
remove all the list item markers okay so that's why we chose none and also we're

27
00:04:32.490 --> 00:04:41.700
gonna remove any padding and any margin okay the reason we're doing that is just

28
00:04:41.700 --> 00:04:48.480
for cross browser compatibility all right now we're gonna style the list

29
00:04:48.480 --> 00:04:59.790
items so the syntax to to do that is an ordered list of class list two and we

30
00:04:59.790 --> 00:05:07.300
want to style the list icers okay so now we're going to use a

31
00:05:07.300 --> 00:05:21.340
background image okay we're gonna select our image using the URL and the link of

32
00:05:21.340 --> 00:05:34.240
the image okay so we need to let's just refresh our live preview so for some

33
00:05:34.240 --> 00:05:40.570
reason we need to do that see the changes for pictures so the problem here

34
00:05:40.570 --> 00:05:48.330
is that we end up with the blue square repeating itself so we need to use the

35
00:05:48.330 --> 00:05:56.220
background repeat' property to avoid repeating so if we do that

36
00:05:56.220 --> 00:06:07.360
and choose no repeats then we can see as the blue square doesn't repeat but the

37
00:06:07.360 --> 00:06:10.930
problem now is that the position is not right because it's overlaps with the

38
00:06:10.930 --> 00:06:26.160
text so we're gonna set some padding to the list items this is some padding left

39
00:06:26.160 --> 00:06:40.980
and let's set that to 30 pixels that will looks better also we can

40
00:06:40.980 --> 00:06:50.020
choose how to position the the picture relative to the text so if we sets if we

41
00:06:50.020 --> 00:07:03.460
use the background position okay so we want to set it left zero pixels and we

42
00:07:03.460 --> 00:07:14.170
can Center it so using center so the left position is zero pixels and the

43
00:07:14.170 --> 00:07:24.010
vertical value is centered here so that's how we can style lists in the

44
00:07:24.010 --> 00:07:31.140
next video we will move to styling links