HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists

Key Takeaways

hi there and welcome to my next video in HTML and CSS for beginners today we're going to be looking at HTML lists how to use them and how to style [Music] them so I saved this video for a little bit later um a lot of the time you'll see lists introduced and then later on how to style them but I feel that you know understanding really how lists are working uh CSS can help show us a little bit of what's really going on so uh first we'll look at creating our list lists and lists are pretty easy to do uh I'm sure you've created lists using programs like Microsoft Word before and we have two different types of lists we have ordered lists and unordered lists and these are like the bullet lists and the numbered lists from Microsoft Word so I'm going to start with an ordered list markup is really easy to remember you have an O and if I have an O I have to close my o so this is my ordered list and then I'm closing off my ordered list now a list can't just you know if I save that and refresh I I won't see anything on my screen I have to put some content in there I don't put paragraphs what I'm putting inside of my list is list items so Li list item and close list item and just put item number one I'll save that I'll refresh and we see one item number one and speed things up let's copy and paste that a few times and and I'm going to select all three lines and push tab on my keyboard to move all of them over at the same time and then let's put a number two a number three number four I'm going to save that and hit refresh again so we get all of them and you can see it's numbering my items automatically this is I'm not you don't see these numbers anywhere in my code they're just automatically coming up because it's an ordered list and by default ordered lists are numbered lists the other one that we can do is a unordered list and this is a bulleted list so if I do a UL close UL let's put some comments here that ordered list so o and my UL unordered list and let's refresh my page and there you go you can see there's bullet points so just like in Microsoft Word where you can push your little button to get your numbered or bullet list same thing here using o and ul and if you made a mistake you can come and change that over to UL and it will automatically change and I can change this one over to an O and now that becomes my ordered list so very easy to use so for creating lists it's pretty simple that's about it uh as far as the markup goes and that's why I didn't devote a whole video to it it's very short a couple of things you'll notice uh list are automatically indented so it's not perfectly lining up with my paragraph It's indenting my list a little bit and it's automatically giving myself some space between my lists so the first thing I want to do here I'm going to select my ordered list so I'm going put an O for my ordered list and I'm going to come in here the first thing we can look at is something called list style type and you'll notice that there's all of these popping up and these are all of my different options so uh some of these are more suited towards ordered list and some are more suited towards unordered lists but you can technically put anything you want so if I did take a circle for my ordered list it will no longer look like an order list it's changing it over to just a different type of bullet point uh so let's undo that and I'm going to change this instead of being there I'm going to do a upper Roman let's just start with that one save so instead of numbers it becomes Roman numerals uh we can also do a lower Roman and then I get lowercase uh we have things like lower Alpha and instead of numbers now it's alphabet and the upper um okay so you know we have a whole bunch of choices there and on my UL I could technically change my UL to a list style type of uh let's just go with my Alphas again so I could make my unordered List look like an ordered list but um I don't actually want to do that let's explore some of the other ones we already saw Circle which gives me instead of a bullet point it's oops did I misspell circle circle and say bullet points it's little circles I can also use a square uh so I get square points instead of circles um I have other stuff other options in here as well uh dis is the default one so dis is just a regular bullet point uh so you can style your list just by changing the list that's on there oh another one you can do actually is none list style type none will just take away the bullets so you still have your list but the bullets are gone so that's kind of interesting as well another really cool thing you can do and instead of using a a list style type you can do a list style image and list style images are pretty awesome um so I'm in here uh uh it's URL so it's a little bit like a background image or exactly like a background image really and in here I have to put the path so I've added an icon I'm going to do IMG icon.png and that's not going to work it's dot dot slash uh so as a quick refresher with this dot dot uh what's going on is let's open up my file um I'm currently inside this folder this is I'm inside my CSS document so I'm telling my CSS document it has to go up one level so the dot dot means go back to my first website and then from there I'm going to my image folder and then I'm finding icon.png which is my new icon that I've added into here uh so with that set up I'm just going to save my document and hit the refresh button and you can see it switches over to the icon that I've created just be really careful with this it's going to take whatever icon you choose at full size so let's just say for fun instead of this I wanted my little ham Hamster do jpig as my image um it's hanging off the side here we can't even see it in my document because it's going off the page uh and it's the full size of the picture so if you are creating your icon you want to use a custom icon instead of a bullet point or whatever just make sure that you choose a a very small icon or you create a very small icon so because there's multiple parts to a list we can also style those parts and uh let's do this for our unordered list here what I can do is I'm going to give my whole list a background of pink so we can see what my list looks like and you can see it's this big block like that and the reason it is that size is uh I'm selecting my whole list so my whole list is one big item that has some items inside of it so it's one big block and let's just add a little bit of padding to that so I can see things a bit better so padding 20 pixels uh just to make it look a little nicer I would normally add a background to a list like this but let's make that 50 actually it's causing some issues on the side here there we go so I have my uh my list like that but I also have list items so what I'm going to do is I'm going to choose my unordered list list items and I'm going to give a background of red and when I do that it's going to highlight just the list items but it looks like one big block uh just to show you though margin 5 pixels just to create a bit of space between them uh just to show you they they're not one big block each list item is its own uh big line here so I can space out my items just by using you know margin I should have made that margin bottom 15 pixels so I can use margin top and bottom to create the spaces on my list items the same way I could do for my paragraphs uh now you also notice that I did my list items inside of my UL so we looked a little bit at this uh in the previous video with this type of selector so this is my list items inside of my UL if I only selected my list items it would do all of them so it would choose my list items here and my list items here which I didn't want to do I only wanted the ones that were inside this area so similarly I could take my o and give that one a background of light blue with padding of 50 as well and then I could come down and give my ois a background of background of blue and hit refresh uh add my margin on there margin bottom 10 pixels and we can't read the text so let's just change the text color over to White there we go that looks a little bit better one thing really quick you'll notice uh even though these are hanging off the side so my list item really only is this text and this is sort of this extra stuff that's getting added by the browser automatically the color of this will match the color of your text and that applies to regular um icons as well so if or my icons it's a picture so we'll always keep the same color but if instead of that I just use the regular bullet points the bullet points will match the color of my text now there's one more property that I think it's important to show you and it depends what browser you using uh Firefox does this a little bit different than Chrome and Safari so if you're using Firefox you might not ever run into this problem but you have to take into account all the browsers and what I'm going to do is for my whole page I'm just going to text align Center uh so let's go find my body tag I want everything on my body text align Center and you'll notice that uh what it's doing is it's centering the text inside of the list item but it's leaving the bullet points and my numbers off on the side here in Firefox it would actually bring the things in here and let's just change the length of my text uh to show you really how this um bullet point number one or item number one Let's Do List item number two and I'll leave the other two the same but just when if the list items are different lengths um now because I have a background on here it doesn't look too strange but we'll take our back wrong document we'll take my background color out so my background blue let's take that out and I'll even take out that light blue we don't need that oh and the color white so we can actually see really what's going on and you'll notice this looks really weird I get my list items here in the middle of the page and I get the numbering or the bullets over here on the left and that just you you can't really read that people won't understand really what's going on and this is one of those browser defaults it's a bit weird but on my o I can change the list style position and the choices are inside outside or inherit which we haven't looked at really uh the default right now is outside and again outside is the default in Chrome and in Safari inside is the default in Firefox and I apologize I don't know what the default in Internet Explorer and Edge is I'm not too sure uh so I'm going to switch this over to inside I'm going to save and you'll see it jumps to the inside like that and just to show you what this is actually doing I'm going to take it on this one as well Oh wrong one on my ul and uh jumps to the inside so the difference between inside and outside is my all of my list items are even if the text is very short the list item is taking up all this space so it's a really big list item even if the text is small like this so when our text is left aligned we don't really notice cuz my text is lining up right on the left edge here and my numbers are right there but what happens is uh when I Center a line my text is jumping to the middle of that box but my icons are staying out over here and it looks a little bit strange so the whole point of this uh switching it over to inside is it brings the icon from the outside of my list item to the inside of my list item and the number or bullets or whatever icons I'm using will jump to the inside of the list so if you are Center aligning or right aligning your text it will look much better and that's it for list items uh you probably won't use them a ton at least in standard lists like this but they're actually used more on websites than you might imagine so as usual I really hope you like this video we're really getting close to the end of this series we only have a little bit further to go but that doesn't mean you shouldn't subscribe if you haven't already already subscribed and hit like if you've liked this video or if you've just liked the series in general and please leave a comment down below and I look forward to seeing you in the next video