Face the default session, let us learn how to do the signing for lists. There are two types of lists, ordered lists and unordered lists are then this comes with numbering or alphabet. Another list comes with bullet points. You have a type attributes in HTML to add the type of bullet points are the type of numbering you want for lists. But that is not the right approach. You need to go in for CSS styling to provide a bullet point or numbering for your list.

That property for doing that list of styles type our list of style image if you want to show an image as a bullet point, by using CSS styling, you can convert a list into a navigation bar. That is our menu when you go into certain websites you might be seeing on the top about us Courses contact us and so many other menu items, right. So that can be achieved very easily with the help of CSS I mean with the help of lists. So first you create a default list our CSS styling to the list, so that it can be converted into a menu bar. We will be seeing that also now. Now, let me go to sublime.

And we will see an example of CSS styling for list. I have got three lists now to another list and one ordered list. Let me add the list of style type. Initially, I'm not going to use internal stylesheet. I'm going to use the inline style sheet. So I can directly write style equal to lifter style type.

This is an unordered list. So you need to specify square or circle or this. Let me just add it a square Then let me come to this ordered list for other lists I can give numbering or I can go in for different types which are available over here. Let me show you that. Now I want to go in for lower Roman you can see lower Roman lower at Latin Greek and similar to the do but upper Roman upper Latin Greek number alphabets, you can choose what what you want. So now I will go in for lower Roman Same way, let me do it for the last one also.

This is an unordered list. So I need to use circle or square or disk. Okay. Now it is that I am I'm not going in for internal stylesheet as of now, let me run this was output. Let us next discuss few more things with the list. As to I want to change the color or the status Meaning of the last in this tournament.

How to do that. Let me show you. Let me go inside style. I have to go in for selectors there are different types of selectors group selector common selector selecting the child of the main element. So, there are multiple types of selectors available. So, let me show you the first one.

So, I am going to use a pseudo selector boy in search of us in us going search of your life. This means identify all the nest inside you well. Now this is getting identified. Now let me add the curly brace. Let me give color colon red. Now what will happen all the list items inside you will have the colors font colors red, let us check this out.

Let me say refresh. Now these two are getting red color. Why not this because this is our audits. list. Now if I give em a color colon red what happens? Everything is getting changed to red color.

If you specify you will face na identify all the lists inside you well that is the meaning. So now we are done this one actually I wanted I want the font color to be read only for the last item that is only for orange and donut. So to do that, I have to go going from pseudo selector in a corner. last detail. No See, have a look over here. There are multiple pseudo selectors available.

Last choice means what last last child up every list inside the UL What is the meaning of last of type identify the last layer lemon laws of this particular Let's face that is the meaning yenta not shine from the inside of Las Vegas, there are multiple pseudo selectors available, if you want to select the first choice, first off types and so on. Now, let me go in for this last session and let me save this refresh. Now, you can see the last list item alone is having the font colors red and red. So, the list item inside the fuel alone is getting selected, because we are given in this manner. Now let me come down Let me scroll down. Now I don't want to have any what is that any bullet point for this particular list?

What should I do? I have to go in for none. Let me save this. So God output the bullet points are removed. If you see in a navigation bar, basically it is a list which is getting converted into a menu. Now I have got the list without bullet points.

That is fine. But it is in the vertical manner, I need to show it in a horizontal manner, how it can be done using this load property. So, you need to go and add the float property to a list not to a ul but to a list. Let us see the difference. Now, let me just go and do float colon right. Let us see what is happening.

Let me refresh, you can see the complete URL is getting floated to the right that is not my idea, I want to float only the list items in this particular URL. So, how to do that let us do it using internal stylesheet. So, I will remove this let me add an ID for this Also, Id call to like this is in cartoon right. So, I have given it a scarf. Oh, let me scroll up. Sure.

I can habitus has cartoon you can Like this also you will identify the universe having the ideas cartoon inside that identify the list. Now float the list items to the right. Let me save this let me refresh. Now you can see that the list items are getting floated to the right. Is this clear? So, with this only a navigation bar will be created.

Let me show you an example how a navbar can be created. Now let us see how to create a navigation bar using an unordered list and choose CSS styling. I have created a HTML file with an unordered list. I have given the size type person and as usual an IDS menu. This ul is having a list. The list is not having direct values, but it is having an anchor tag because everything is going to be in the form of links.

Yeah, should have equal to you're supposed to specify the file name Home dot html code to start HTML contact us dot html something like that. So, for that I have given value also. So when you click automatically does to go to the next page right now what is the first thing I have to make them float right then I have to remove the underline from this anchor tag because when it says a link always it will get an underline. I can provide margin padding all those stuff so that it looks like a neighbor. I have done all those. Let us have a look.

Yes, x decoration is love. So don't add any underline. Next, change the color to green so it will not come with a default blue color. Then to the menu bar hyphen, yeah, like I'm floating it to the left. So I'm starting from the left to the right. Then I'm giving you a margin, padding and a border.

Now let me just execute this. You can see those everything is going to be a link. They are Links but they are not having an underline. So, this is how you create basically navigation bars using lists, you have to add much more styling so that it looks good and it is occupying the complete space of the container. Just for the demo purpose, I have done this, I have shown you how to use the flow property and the list to create a navigation but that's it. Thank you