Understanding List Styling in CSS

Hello guys. Welcome to our series, CSS. In our last segment, we had seen about CSS overflow property in which when the content goes out of our defined division width or outside of block element width and height. At that time in which way, we can handle it. Guys, I hope that you have practiced all four types of practical on your own. If you have any issue of difficulty in the last segment or if there is a point that you have not understood or you are facing any issue at the time of performing the practical. You can tell us on forums.learnver.com. We will resolve all your issues and try to revert to you. Our today's segment is on the CSS list property. We have already generated a list in html using ol, li and ul, li. On the same list that we had generated. On the same list which all CSS properties can be applied, how can we decorate, modify it or customize it. That happens with the CSS list property. Okay, Got it? Now, what is the list? So, there are various CSS properties that can be used to control lists. Means the list that we have generated through html, through html elements and that list generated through html elements, we are controlling that through CSS properties. list can be classified as ordered lists, unordered lists that we have already seen in html, ordered and unordered lists are available, in ordered list we have alphabets or numbers through which we display, like 123, ABC, in this way we display with the numbers, our list. In an unordered list we display through items, like bullet circles, disc, by keeping these we display our unordered lists. Now in this, whichever list is ther, ordered or unordered, when we style it through CSS list property, at that time what we do? So here are some points that are mentioned that, set the distance between the text and the marker in the list means with us bullets are there if it is unordered, if they are ordered there are numbers like 123, in roman letters or in alphabets like ABCD. So, the number or the marker which we have, it is called a marker. The distance between the marker and the text of the list, the space that we can adjust. 2^nd point, specify an image for the marker instead of using the number or bullet point. If we get a requirement that we don’t have to use numbers rather than that we have to use an image that we can use using this CSS property. Control the marker appearance and shapes, whichever marker we have used, how is its appearance and what is its shape, that we can control. Place the marker outside or inside the box that contains the list items. When we do it practically, we'll understand that what this line is trying to say, this line is trying to say that when we place any number of bullets at that time we have 2 ways, one the bullet number which is n number, it should start with our text from inside or it should not start with our text, it should start from outside. When we have to start it from outside, we place it with outside and we have to start it from inside, we place it from inside, the spacing that is there inside it, we will get to know more when we will perform the practical. Set the background colors to list items and list, which means whichever are the list items, list, setting its background color. So, this is a theatrical portion for the list and we will go ahead in this. So, we have few properties related to the list in which the first is List Style Type. Which style we want to give the list, whichever is our marker, bullet, disc or whichever shape we use or the number we use. To give that marker a style, we have List style type property.  If we are using any image instead of the marker for that list style image is available. Marker and our list item, the statement that is there in between those two, the spacing that is there in between, to adjust that we make use of list style position property and if we want to use all three together, for that we use them 3 as a combination, we use combined property. Then comes the marker offset. This maintains the distance between the marker and the list item but this property of ours is not applicable in two places. When we are using browsers like IE6 or Netscape 7. Then, It is not used. First is our list style type. We will see what it is. In List style type property, our list that is there, like the ordered list specifically in which we introduce numbers as a listing in 123, or in roman numbers or in capital roman letters. Or in an unordered list we use bullets, discs, etc. At that time, how we can pass these icons that we define using CSS. Same thing we can do through html. When we had covered the segment of list in html, in html course, in that we had passed these things in html using type attribute but if you're not making the use of type attribute, you can do it through CSS, which we will see with this example, with List Style Type property. First of all, we will open our Sublime Text. In sublime text, html, In this, Example List Style Type.(pause) Okay. List Style Type is our program and we will run it. Okay. Now in this, what we will do first is we will generate a few lists, for example, first of all, we will give a header that says “Welcome to Learnvern”. We will give such a header, first of all in h1. Okay, now in this we will add a few ordered lists and a few unordered lists. So, first of all I will add an ordered list and in the ordered list for example, one, two, three, this is the ordered list that we have added. I am copying this ordered list three times. In the first ordered list for example, I have to give numbers but decimal numbers. So, I will write here one style in which, which is our property? List Style Type. So, List Style Type, its 1^st property was decimal value. So, I will use decimal here, till that time I will comment this, save. Okay. So, this has come “Welcome to Learnvern” heading. So, 123, we have taken decimals so we are getting 1, 2 and 3 here. If from this uncomment If I comment only the last one and this my ordered list that is there in that I will add style. List Style Type, we have used decimal, now we will take alpha, we will take simple alpha, we will take lower alpha first. We will run it. So lower alpha means lower case ABCD, which we call small letters. So, we have a, one; b, two; c, three, we are getting that. If this same thing I will write here. Style, List Style Type, Upper alpha. We are getting ABC here.Okay, got it?  So, the html availability which we have through the type, we have not used it. We have passed the numbers and listing through CSS, like 123, So 123, 123, the data is common but we have numbers in 123, which is in decimals. Then in small letters abc, we have passed first. Then after that in capital letters ABC have been passed. So, this is what we have done for the ordered list. Now we will do the same thing for the unordered list. We will pass the same data.  through li but hear style, list style type. As we know that in an unordered list there are bullets. So first of all, I will use a circle. So here I'm getting empty circles. I have copy pasted the same. Here I will place a square Instead of a circle. So here I'm getting square. So, these are markers, bullets, empty circles, field squares. At the end I will add the disc style. So here we are getting the disc means filed circle. Okay,guys! So, whichever markers we have added in our listening, those we have added using CSS. So, this is our example that how to add List Style Type using CSS. Let’s say for example if I take ul and I don't define List Style Tag, save and reload. In the default view we get this disc as a default. I wish that my list should not have any style. In that case, style. List Style Type, none we can pass.  What happens when we pass none? There is no style that is passed for the list. There is no list or bullet that is passed.  So, whenever we work with any application, when we have to generate a list in horizontal view, in that case this property is very useful. That we remove the disc or any other property that is getting added. Rest of the content we can show horizontally or vertically in whichever way we want to show on the front end, we can show it. We'll come back to the slide. We have seen all List Style Type; decimal, lower alpha, roman, circle, disc. okay. Now, Next is our List Style Position. To understand this, the program that we have made here. We will generate one more same program. HTML, example, list style, ours is position.(pause) So, here our program has come of a list style position. In that we will give a header, List Style Position. Now in the position, if we see in the slide there are two values available, Inside and outside and what does this indicate. Our markers are there where they should start from, for this list style position is used. For example, the ul and li that we have generated, from this I'm copying the last two ul, li.  Okay, so in this list style position we have copied the two ul, li. So, I am getting the two in line. Now I am keeping List style square as it is or even if I remove it. We will get a disc, which is default. Okay, we are getting discs in both. Here I will take a list style position, in the first we will take inside and in the second one we will take list style position outside, save and reload. So what is the difference that is coming here, where we have used inside, that disc is leaving the space and starting from inside. So, from where it is starting from inside. In our other list there is no difference, when we had set the outside list style position. Outside means our default view that is there, it is with outside. Now my list’s icons have moved a little bit inside. From where it is getting started? When we come down from this line. From where my text gets started. In the same line my disc has moved. Which indicates, means what is proved with this is when we start the list style position from inside, so our marker that is there with the bullets and numbers those moves inside and they start from where our content should start. Right? okay! So, basically if my content should start from this position. So, from there my icon will start and from there my statement or whichever are my listing items will start. So, this is inside property, what happens in outside? Our bullet or whichever marker is there, it starts from a default space and the content will start from where it is supposed to start. So, outside we have not got any difference. But in inside we need to understand that in inside from where the icons, bullets will start, from where usually the content will start. After that even our content will start. In between the two the space has also increased when we have started it from inside. Got it?  So, this is the difference that we are seeing in the view. What is the inside difference and what is outside difference. So, this is our list style position property. Then comes the list style image property, in image what happens is the bullet or icons that we have used, those icons or bullet gets placed with our desired image.  Here it’s syntax, we can pass an image in a list style image through URL. For example, we will generate one more program, Example list style image, save, image,(pause) okay. So, in this we will copy one of the Uls. Okay. Here it will come a list style image, here we are removing this. Inside property. Okay, so list style image, so by default we are getting disc, as per property we want to pass an image here So, here I have one Learnvern image, it has the name learnvern.png. What will I add here in this style? List style image, then URL and in that URL that image that is there that is in the folder named images. So here first of all will come images, after slash, learnvern.png, reload. As soon as I reloaded it, my bullets were replaced with the image. My image goes out a little from the left side. So, let's say I take here, list style position inside. Okay so here in the place of the bullet, what am I getting? I'm getting my image. So, I have used the Learnvern image. So, I'm getting the Learnvern image. After that I'm getting 123, my listing items which are there, those I'm getting. You can customize these images through CSS because the image that I have used currently is a very big image in the width. You can reduce its default width and use it. Currently I am showing here the example where I have intentionally taken a bigger image. So that we can identify that instead of bullets we can use images.  So, here in the list we have replaced the marker with the image for the styling. After list style image comes list style, it means common. Common means in this we can add everything. Without using list style, image, position and style type. Instead of using these 3 individually, we can use it together. Got it? So, for this we will generate one more program. Which will only be the name, list style, html, Example list style, we will run this program.(pause) Now, in this the heading we have used everywhere, similar heading we will add, list style. And here the ul that we had taken. We will add that ul as it is here. Now, we have to use all the properties together. So, in list style we will write lower alpha, inside, url, image. So, it will come here, this portion will be cut.(pause) List style, lower alpha, inside and the url of my image, save and reload. So, here inside the list style we are not getting alpha. Means the ABCD that we should get, that we are not getting. We have got the inside, yes, that is true. There is an image in url, even that we have got. If we cut this, okay, so we are getting lower alpha here. So, what is happening here is as soon as we apply our image, the image overrides the image…whatever we have passed in decimals, our image is overriding that. Okay, guys! So, this is an example of, when we are using an image, we cannot use the numbers. But we have to use olb along with it. As the ul doesn’t support numbers. We are using ol, okay. We have saved this, okay. Even after taking an ordered list our lower alpha is not supporting. Means the image is overriding our numbers. So, this is our list style.okay! So, here we have covered all the properties, for example, list style type, individually, list style image, list style position. The combination of all three is our list style.right? All the programs that we have generated here, in that the 1^st one is listing style, then was the listing style position, in which we had added inside and outside. Then we have replaced our bullets and markers with an image. Without using the individual properties, we have used only list style. So, this was our CSS listing. How we can use listing through CSS to customize and modify our list. So, guys in today's our segment the properties that we have performed and practiced individually and collectively as practical. So, I request you all that you yourself perform the practical and practice it. And if you have any question, doubt or query while performing today’s practical. You can tell us on forums.learnvern.com. We will resolve all your issues and revert to you.Okay,guys! Our next segment is on calc, calc is our function. We will see in our next segment how it works.