1 00:00:00,450 --> 00:00:03,000 Hello everyone and welcome back. 2 00:00:03,000 --> 00:00:09,210 In today's video we will learn how to add science to list using CDC's let's say you've got these two 3 00:00:09,210 --> 00:00:16,840 lists one is audited list and one is an ordered list so CSX allows us to change the list type for etched 4 00:00:16,840 --> 00:00:17,750 in a list. 5 00:00:18,150 --> 00:00:22,050 So right now we've got the stylus 1 2 3 four for the order list. 6 00:00:22,050 --> 00:00:25,010 Let's try changing that. 7 00:00:25,210 --> 00:00:31,670 So this is the code we have and for the first list we've got an idea let's use that for the styling. 8 00:00:31,700 --> 00:00:40,280 So coming to our index to use this file let's place the idea here and to change this list style. 9 00:00:40,310 --> 00:00:47,230 We've got a property called list style so list style and type. 10 00:00:48,130 --> 00:00:50,740 So this property accepts multiple values. 11 00:00:50,950 --> 00:00:55,710 Say we want the list to be in alphabetical order and uppercase. 12 00:00:55,870 --> 00:01:00,840 So we could go something like this I've got. 13 00:01:01,200 --> 00:01:02,450 Let's save it. 14 00:01:03,180 --> 00:01:06,810 As you can see a list is in alphabetical order. 15 00:01:07,290 --> 00:01:16,500 Similarly if you want it to be lowercase we could do something like this lower alpha let's save it. 16 00:01:16,650 --> 00:01:22,450 And as you can see our list is in alphabetical order just the lowercase similarly. 17 00:01:22,450 --> 00:01:25,240 So if we want to make it uppercase Roman numerals. 18 00:01:25,240 --> 00:01:33,420 So we could do about Roman let's say that we've got these roman numerals similar that if you wanted 19 00:01:33,420 --> 00:01:38,420 to be lowercase Roman numerals we could do something like this so lower on Roman. 20 00:01:38,490 --> 00:01:43,800 Let's say the I mean by this lowercase Roman numerals. 21 00:01:43,800 --> 00:01:48,280 Similarly we can change the list I'll take four of unordered list. 22 00:01:48,450 --> 00:01:49,840 So let's get the idea for that. 23 00:01:50,510 --> 00:01:57,280 So let's just copy it from you and priesthood because it's an idea so we need to use hash again the 24 00:01:57,280 --> 00:02:05,610 same property less stable type so the default value of unordered list is desk but we can change it to 25 00:02:05,610 --> 00:02:06,920 circle and square. 26 00:02:06,960 --> 00:02:07,890 So let's try that. 27 00:02:08,190 --> 00:02:15,150 So same circle and as you can see are unordered list as these so-called. 28 00:02:15,600 --> 00:02:17,600 Similarly you can have it a square. 29 00:02:17,790 --> 00:02:24,990 Let's say that as you can see a list items are no square. 30 00:02:25,020 --> 00:02:27,420 Now let's try making this list multiplying. 31 00:02:27,420 --> 00:02:39,250 So coming back to so locally let's say lowering x dollar or let's just copy paste it multiple times 32 00:02:43,080 --> 00:02:44,240 similarly here. 33 00:02:48,890 --> 00:02:50,030 Similarly here 34 00:03:07,730 --> 00:03:20,850 but say as you can see now our list doesn't do lines let's reduce the word say with 500 pixels. 35 00:03:20,920 --> 00:03:23,780 Let's say that now. 36 00:03:23,810 --> 00:03:29,110 As you can see our list items are in multiple lines and these markers. 37 00:03:29,110 --> 00:03:33,430 So this first second third etc. These are outside the list. 38 00:03:33,430 --> 00:03:38,130 So what I mean is that the text has an indentation from second line onwards. 39 00:03:38,140 --> 00:03:42,630 So the second line and third line has a bit of space in the starting. 40 00:03:42,700 --> 00:03:44,110 So let's say we don't want that. 41 00:03:44,110 --> 00:03:50,140 So we want to get rid of this indentation but in other words we want to get this markers inside the 42 00:03:50,140 --> 00:03:54,910 list so for that we have another property called list style position. 43 00:03:55,660 --> 00:04:01,070 So let's try that so let's stay in the position. 44 00:04:01,440 --> 00:04:12,350 Let's say inside the table as you can see now our list items don't have any indication on these markers 45 00:04:12,380 --> 00:04:13,010 are insane. 46 00:04:13,040 --> 00:04:20,420 Let's writing in the type of markers say a book is Alpha a target. 47 00:04:21,000 --> 00:04:26,760 So as you can see these markers there inside the list items now or in other words that indentation in 48 00:04:26,760 --> 00:04:29,550 the second and third line is gone. 49 00:04:29,560 --> 00:04:33,250 Now let's say you want to get rid of these markets we don't want these markets to show. 50 00:04:34,150 --> 00:04:36,870 So for that we can do something like this. 51 00:04:36,880 --> 00:04:38,040 So this type type. 52 00:04:38,500 --> 00:04:40,860 So it accepts and other property got none. 53 00:04:41,770 --> 00:04:45,070 So when you give none of these markers aren't visible anymore. 54 00:04:45,070 --> 00:04:50,080 So let's say that as you can see the markers are gone from our unordered list. 55 00:04:50,560 --> 00:04:54,570 So also if you notice our list has a defined left button. 56 00:04:54,580 --> 00:05:04,790 So let's remove that as well say batting left on the now as you can see all the list default sites are 57 00:05:04,790 --> 00:05:05,090 gone. 58 00:05:05,090 --> 00:05:08,510 So we don't have a marker and we don't have the left batting. 59 00:05:08,660 --> 00:05:09,740 That's all for today guys. 60 00:05:09,800 --> 00:05:15,260 If there's something that Jim did not understand feel free to drop a comment and we will discuss it. 61 00:05:15,260 --> 00:05:16,310 See you in the next video. 62 00:05:16,430 --> 00:05:17,220 Bye Andy. 63 00:05:17,270 --> 00:05:17,540 Get.