 Hello, my friend and friends. Lists are one of the most common elements that we use when we're creating websites from just making simple bullet lists or numbered lists, and we use them for navigations too, and a whole bunch of other stuff in between. So in this video, I'm going to look at the two most common types of lists. So I will address the other ones that you can have as well. But we're going to look at the two most common ones, what we should use them for, and also how we can style them from doing simple styling, like adding some spacing to them, changing the colors of things to customizing the lists a little bit, changing the color of the icons or even changing the icons completely to our own custom images and other stuff along the way as well. So let's jump on over to here. I'm using VS code right now. We're going to jump through and look at a few different examples as we go through this. And as I said, the main ones we're going to be looking at are ordered lists and unordered lists. We do also have description lists. They're really a bit of a niche topic, and they're kind of different from these, you won't see them used very often at all. So I'm not going to talk about them in this video, I'll probably make a new video in the future that just focuses on those. We do have the menu as well, which I almost never actually see. And it's basically an unordered list anyway. So that again, might get its own video in the future. But ordered lists and unordered lists are what you're going to see almost everywhere all the time and are the most important ones to know. And just before we dive into the details on them, if you're watching this video, I'm assuming that you're pretty new to HTML and CSS. So just really quickly, if you're new to my channel, my name is Kevin. And here at my channel, I help people fall in love with CSS most of the time. But of course, I do talk about HTML as well. And I'm now dedicating every Tuesday video to beginner friendly content like we're seeing right here. So let's dive right into it with my ordered lists. And we're going to look at this really fast. We have an OL for ordered list and makes it nice and easy to remember. It's a lot shorter than writing ordered lists. We just need the first letter from both words. And that's all we really need there. And for an unordered list, you might have guessed it, we have a UL. And for these, though, there is an important thing is we have one third element that we have to use, but it's the same for both types of lists. And let's come inside of here. And what that is is an LI, which is short for list item. And it's really important that we do list items, because if we didn't, and let's us say I came here and I said, you know, item one, item two, item three, and hit save on that. And I have this opened in a browser on the side. So let's pull that into view. And we can see that I have item one, item two, item three, just all going one next to each other. And that's because these are just strings of text. And the browser sees this, I have a list, and I have a bunch of text in there. It doesn't know what to do with it. So it just throws it in there, it ignores line breaks, HTML doesn't care at all about line breaks. So we need to define these as three different things. And to be able to do that, we can come here and say their list items. And just a really quick tip here, actually, if you're writing HTML, and you want to be able to move stuff around, you forgot your list items, you need to move it in, I can select the text, and I can click and drag to where I want it to go, and then let go. So it just makes it a little bit easier to move stuff around sometimes. So we can do that here to li, and then I could also just select this closing li move it over. And then we'll just copy that, paste it there, and do the same thing, hit save. And now we get my three items coming in. And we have the number one, number two, and number three, because this is an ordered list. And then let's copy this over, bring it down here. So we have two ordered lists. And then I'm going to take this and turn it into a UL. So an on ordered list. But if ever you do something like this with copying and pasting, don't forget to change the other one as well. So we are closing tag is matching our opening tag. And let's hit save. And we can see that this is updated to have three bullet points right there. Just really quickly, though, I'm hitting save here, and the updates are happening here. If you're wondering how that's working, I'm using a VS code extension called live server, I'll link to that in the description. Just because this is a lifesaver, if you're making changes here, and then refreshing it's a little bit annoying. So hit save here, it refreshes the page for you. It's fantastic. So yeah, that'll be linked in the description. Now I have my OLs here, my ULs here, and we can see that we have a numbered list and a bullet list. And the first thing that I want to mention now is that this is like the most important part of it is these numbers here and these bullets here. These are just visual representations. But it doesn't mean that there's not actually meaning to using an ordered list or an on ordered list. These are semantic elements, meaning they actually do carry meaning, and they just happen to have default styling that looks, you know, the way you'd expect those things to look. But you could have somebody who's using an assistive technology like a screen reader that actually reads the website to them, or you get bots that from like Google and other search engines and other places that will be reading your website, and they don't have any visuals to look at, they're just looking at the code. And so using the correct element in the correct place is really important, because as we're going to see, we can change the styling, we can completely change what the lists actually look like. But just because we can change what they visually look like, doesn't mean that we shouldn't be using the right list for the right job. And to help illustrate what the right list is for the right job, I'm going to jump over to this example right here. We won't worry too much about the HTML, but I think recipes are like the easiest way to sort of hammer home this idea of when we should use an OL or a UL. And so here's the instructions on how to make hamburgers. And then all the way down at the end here, we have an ingredient list. And so both of these, you know, these first three sections here are using ordered lists, because we can see the numbers that are there. But what an ordered list really means is these are things that really need to be in this specific order. If we look at how to cook the burger, we're starting with preheating, we're going down to actually cooking them, and then are putting them in the pan, pushing them down. And then this third step is, you know, cook them for as long as you need to cook them. Basically, it's not the best cooking instructions in the world. But the idea here is like, you wouldn't do this one first, and then this one second, and this one third, or whatever, you wouldn't change the order of any of these steps are same thing with these, these, the order here is very important. It's a step by step guide. So we have to finish number one before we go to number two. Whereas if I go down to my ingredient list here, I used an on ordered list for these, because the order of them really doesn't matter. If I go grocery shopping, and I have this list, and I see eggs first, I can buy the eggs. And then I can get my red onion, and then I can get my cream crackers. The order has no importance on this list. It's just here's all the stuff that you will need, get it all, and then we're going to use them in a specific order when we start going through the instructions that we have here. So if something needs to be done in a specific order, or the steps or something like that, then we're using an ordered list. Anytime it's just here's some stuff that you need. It could be a list of links, it could be a list of basically anything. Most of the time I find we're using on ordered lists. Then, you know, we use our on ordered list, our UL, and we're good to go. But of course, both of them look kind of boring. So let's get to styling them. And I think it'd be easier to style them with this basic example, just because we don't have as much to worry about on the page, and we can really understand how they work. And to do that, I am going to be using external style sheet. So I have a link here to my CSS file. And if you're new, you might not have used an external style sheet yet. You should easily still be able to follow along. This would be exactly the same as having a style here at the top and having my CSS in there. And if up until now, you've only ever used style tags on an element to style it, I still think you'll be able to follow along pretty well. Though I will put a link in the description to a video that explains how external style sheets do work in more detail. But yeah, if you've used the style up here, nothing will be new. So don't worry about it too much. It just lets us focus a little bit on, you know, here's our styles, we don't have any other clutter on the screen at once. And the first thing we're going to do is let's select my list because CSS is all about selecting things and then doing something with those. So we can select my on ordered list. And I'm going to open and close some curly braces. And then we're going to style something here. And if this is if you've only been doing style is equal to the parts inside these quotations are exactly what I'm going to be putting right here. And I would really if you're still using inline CSS, I'd really recommend learning about external style sheets, just because that is the standard, it's how you're going to be working going forward. So there's no better time than now. And on this well, I'm going to put a border. And let's go with like five pixels. So we can see it solid. And we're going to do an orange red. So it stands out a little bit. And then let's come down and also select my ul. So I'm selecting my on ordered list, opening, close my curly braces. And I'm going to do a border on this one, we'll do five pixels solid. And for this one to coral, it's a little bit different, but we see it maybe corals too similar actually. Let's try lime green, which will also stand out. And there we go. And there's a few important things that I want to highlight. And the reason I'm putting borders on these at all is that we have these block level elements. So a list here, it's one big block. And then I have another big block under here. And that's my two elements stacking one on top of each other. Next up, I can also come in and select the list items themselves. So right now I have a box around all of this, I have a box around all of that. This is my orange one, this is my green one. Now I can put boxes on all of these. And this is if you've been doing inline styling, where this is really handy, because I'm going to select all my list items now. And we can throw a border on all of these. Maybe we'll do three pixels for this solid. Let's go with Dodger blue for this one. Because why not? There we go. It's a nice blue that we have coming in. And the again, the reason I'm doing that is to show us each one of these is its own independent box. So we have the list, and then we have these little boxes that are inside of it. But you'll also notice we have some spacing on the side here where the bullets are falling into and where these numbers are falling into. And that's kind of interesting. So what I'm actually going to do is if we come back here, and if I come in, I'm going to quickly add some paragraphs to this, I'll see you back in just one second. Okay, so a bit of a bigger update, but we have three paragraphs that I play. So I have a paragraph, then I have my list, I have another paragraph, my next list, and then my last paragraph down here at the bottom. And I've also made the text inside of these ones at the bottom a little bit longer just to highlight something else that's going to come up when it comes to styling these. And so what that is is, as I said, we can see that these blocks are full width or they're going the full size. But notice how here we have thing one. And even though the text is really short, that box is going the full size here all the way to the end. And again, this is a block level element where it has all that space to live in, but it's not going to escape out the side of its parent. So here where I do have longer text now, when it gets to the end, it's going to wrap down and it's just going to have its normal wrapping text. This is exactly how you'd expect it to be. But I just want to highlight these are block level elements, they're taking up the full size that is available to them. And it's also going to help us when it comes to styling a specific thing. But the first thing I actually want to talk about is the spacing that we have around the elements or where these bullet points and other things are. And also that there's some default spacing on the top and the bottom of them. And people to highlight this, what I'm going to do is right click, and I'm going to choose inspect, you can do this in your browser to whether you're whatever browser you're in. And that's going to either open a separate window like I have here, or it might be stuck to the side of yours. If you haven't used this, this is called our dev tools. And it's one of the most useful things that you'll ever see. I guarantee you're going to be using it all the time. It's a lifesaver. I grew up without it when I first started this. They didn't have these. And it's really nice that we have them now, but it's really fast if yours is, you know, if you want it in a separate window, if I click on these three dots here, and I am in Chrome, this might be a little bit different to move them around in other browsers, like I can dock it inside my window and have it so I can scroll up and down. And this just stays here at the bottom. And you can zoom in on these. So if you find the text is too big or too small in them, just a control a plus or if you're in a Mac, it would be a command plus and you can zoom in and make the font sizes bigger or smaller minus to make them smaller plus to make them bigger. And the reason I'm doing that is I'm going to grab this guy here, this weird little arrow thing. And in the other browsers, it looks similar. I think safari is like a little circle with a cross in it, or an X in it, but you can go and highlight different things. And if I go and highlight my list here, I can actually see the different pieces of it. And I can do the same thing over here with this. This is my box model. So I can see my list items. I can see the or I can see the content. Actually, this is my O L. So there's the content, the blue area. I can see my padding on the left there. I can see the border. And that's what I put. And then I can see that there's a margin on the top. And there's also a margin on the bottom here. Now I never put this margin here. I never put that padding there. These are what these are part of the browser defaults. And this is just how the browser is styling things, just like we have numbers on this, and we have these bullet points on this, we didn't put those there, we just chose that element and they showed up. So it's just part of the default styling. And this is where it can be really useful to use your DevTools because I can go, you know what, this space here is too big. I don't need it to line up exactly with my text, but maybe I don't want such a big space here. So I can see here, oh, that's coming from padding, and there's only padding, there's no padding on the top, there's no padding on the right, none on the bottom, it's only on this left side. So that means I can go over to my CSS, and let's choose that ordered list. And we can say that the padding left and right now I can see that it's 40 pixels. So if I want it half as big, I could set that to 20 pixels, and it's going to move over. And now I have that padding that's right there. And we have to be careful with zero. There is a reason that we have default padding, and it's because if we do zero, it takes all that space away. And the numbers are actually going to hang off the edge of the page by default, which can be a little bit awkward. Now you might set things up a little bit different with the styling on the rest of your page. And then you have these hanging numbers that can actually look kind of good. But doing the zero on it as a default, if you're keeping it as like a regular list like this and not a navigation or something, it is important to keep some space available. And of course, if you want to go bigger, we can go bigger too, and make it as big as we want. And we can use other units as well. So one would be about 16 pixels, maybe we'll do two or 1.5. And we get the space, however we want it. Of course, we wouldn't normally have these boxes drawn around things. And we're just going to keep those on now for visualizing stuff, but we'll turn them off eventually as we get these to look a little bit better. Now speaking of spacing, I said there's the default space on the top and the bottom. So we might want to increase that space. So I could come here and just say like, let's double it 32 pixels, and I doubled the space on the top, and then I can do the same margin bottom 32 pixels. And I can increase the space there. Now the one thing that can be a little bit frustrating is if I do a margin of zero there, and I do a margin of zero there, and I still have a space that I wanted to get rid of. And if I look here, I have no margins, like let's highlight that entire thing again, where we can see the entire element, there's no margin top and bottom, the space is coming from the paragraphs that are around it. So this is sort of called, this is part of what we call collapsing margins were before this, the margins were actually collapsing into each other. I don't want to get too far into that because I want to stay with lists in this video. But just to say you can increase the padding or the margin really easily. But if you do have other elements around it, you might have to play with their margins as well. If you're trying to make the spacing smaller, though most of the time, you probably want to have some spacing on there getting a zero is a little bit. It's not often that you're going to do something like that. So let's take these and you know, I'll leave these on here. So we have something to look at. So maybe we'll go back up to 32 pixels for the two of them. Then that's most of the spacing. The only other one that I want to look at is sometimes we have the spacing between the elements that you know, we want a little bit more room and for this actually for now, let's turn off these colors that I have. And I'm doing a control forward slash to turn these into comments. If you're on a Mac, that would be a command forward slash. And by doing that, it just turns it into a comment so I can turn it on and off just by pushing that which makes my life really easy. So I can sort of debug stuff or visualize things turn off the borders. I'm always putting borders and backgrounds on things when I'm doing layouts and CSS or trying to figure things out just because it lets me visualize what's happening because when everything just has a white background, it doesn't really help me very much in understanding exactly what's going on. The last thing we're going to do now for when it comes to spacing around stuff because we saw our padding, we saw the margin top and bottom and it's this distance between the elements that we sometimes want to have a little bit bigger. So on my list items here, one solution that I see people do that I will not recommend is to use a line height. And I would just want to show why I wouldn't recommend it. Because when we do it on a small list like this, it looks like it's working fab. It works. And I see people do this, not only on list items, but I see them use it on all sorts of things. And it's not the best idea because if you have more text, it breaks everything and it doesn't actually add spacing between the items. As we can see here now, I have tons of space between each line, but the list items are just as far apart from each other. So it's only working if we have one line of text. That's not a great solution at any time because you might have a short list item that turns into a big list item and then it ruins everything. So if you've been using that or you've seen that trick used, don't do that. Instead of that, we want to go on these because remember each list item is its own box. So that means just like we had our list where we could control the margin top bottom padding all of that, I can do the same thing on my list item. So here, let's actually let's just go really let's do the line height again line height of two, just know that I have these borders on it because you can see it's not increasing the distance between the items, it's adding some spacing inside of it instead. We don't want to do that. We want the spacing on the outside of them. And if we want spacing on the outside, then we use margin. So I can just come in with a margin bottom of let's go with 16 pixels, hit save. And now it's added that space on the outside of each one. And on this list, it's going to look very similar to what we had before. But you can see on this list at the bottom, it works much better. Because now we have my list item, we have the space, my list item, my space. So if we turn off that, now, we can see that we have, you know, it looks a little bit better, the items have somewhere to breathe, it's easier to see that it's three distinct points. So adding a little bit of margins on our list items can often make you just help a little bit with clarity in being able to read something. So yeah, there we go. That's I think everything that I wanted to cover when it comes to spacing elements. Now the next thing I want to look at is changing the numbers or the bullet points. And there's a lot of different ways that we can actually do this. So the first thing is just changing the color of them. And there's some easy ways to do that. We can go on the list itself, or on the list item, it's really up to you. I'm going to do it on my ol, let's just change the color here to orange, red, and hit save. And you can see that the text has changed. And the list item here has changed as well, these numbers have changed. Now you might only want to change that and not this we're going to see how we can do that in a second. But it is really important to know that by default, the color of them matches, let's take the same color and put it on my ul right here. The color of the bullet point or the numbers or whatever is here will be by default the same as our text color. So that can make our life a little bit easier sometimes. But of course, sometimes we want them to be different colors. I'm going to circle back around to that once we look at styling these up a little bit differently. But just really fast, I think it is important to know that they do match each other like that. Now what I want to do is look at some of the properties that open up that we only have for lists, because margin padding borders, we can use those on basically everything. Whereas we have a few list specific ones. So one of them is list style type. And list style type is a bit of an interesting one. I'm going to make this a bit bigger just so we can see everything that I'm working on will resize my browser here a little bit. And list style type, because it's a CSS property, there are some list style types that are for ordered lists. And there's other list style types that are for on ordered lists. But we just have one property for all of them. So one thing that we can do here is we can actually write none and it's going to take them away. And that might seem really silly. But this is actually really common to do for when it comes to making a list into a navigation. For example, we turn off the styling, remove our margins, remove our padding, and then probably use Lexbox to make it into a bit of a layout. But if you're going to keep it as a regular list, I wouldn't suggest doing none since visually we lose them. Now, the default here is actually called decimal like that. So if we have decimal, it's coming with decimal numbers, that's the default. You actually don't have to put this if you don't want it. You know, if you want to just keep things the same, you never have to change that. But just as an example, we also have like lower alpha, which will make it ABC instead of 123. Lower means yes, we do have an upper and then we have an ABC. So these are, you know, other ways that we can have ordered lists. You might you'll see upper alpha, you'll also see Latin, the Latin and the alpha as far as I know are exactly the same. So lower Latin will be exactly the same. There are other ones here as well, though, we have the Greek, if you want the Greek letters coming in, we have Armenian, you know, we have a whole bunch of choices, I'll leave a link to a list of all of them because there's too many to go through right now. But let's just put this one back to decimal for now. So we have the default that's coming on that. And then over here, we have a list style type as well. And for this one, the list style type, the default is disk. So if I put disk, nothing actually changes. Another one that you might think is the default is circle, which I misspelled circle. There we go. And you can see they come in as circles instead of full discs, they're just the shape of a circle. We have square. And we have a few other ones as well, we can see that those are coming in and we can change the style of that. Now what you could do is you could come up here and actually say that my ol is a square. And it will work because they're interchangeable because it's the same property and their lists. But like I said at the beginning of the video, please never do this, we're making this look like an unordered list, but it is an ordered list and screen readers are going to see it that way and Google is going to see it that way and anything that has to look at the code because it can't see the screen is going to see it as an ordered list. So don't make an ordered list on ordered looking and vice versa. Because again, we could come in here and do that just because we can do something doesn't mean we should do something. So let's not do that. And you know what, let's just come in. I think we have Georgian as well. Is that there we go just to have something a little bit different at the same time for both of them, right? They've been styled a little differently. But these are using the default options we have for list style types. And sometimes you don't want something not so much on the numbered lists, there it makes sense because it's counting something. So it's changing each one of them. But on our lists down here like this, you know, a square, a circle, all of those things, it's a little bit boring, right? So we actually have a couple of different choices that we can use for these. The first one is if you do have an image that you want to use, you can use list style image. And if you've ever done a background before, it's exactly the same way. I'm going to put a URL. And then I have to do the path to my image. So in this case, my path is going to look like this, but we'll explore why in a second. And mine is burger icon dot SVG. And you can see now these are little tiny hamburgers. Let me zoom in a lot on that so you can see it a little bit more clearly because I kept them really small. But I was going to do this on the hamburger recipe before. That's why I have the burgers coming in here by that little burger icon coming in because this is a small little burger icon that I have saved. And just in case you're not familiar with like padding things like this, what we're doing is if we look here, I'm in this CSS file right here. And the dot dot is to go step backwards. So we're inside the CSS folder. I want to escape outside of that to where all of these things are living. So now I'm in this main area, I'm in the root of my project, and I want to go over to my image folder. So I am G goes to my image folder. And then here I have my burger icon that is right here that I'm getting. Now you can put anything you want here, you can have any image whatsoever. So let's just say for fun, you can see I have a background there. If I bring in my background dot PNG, well, guess what, it's actually going to work, but it's this really big image. And it's sort of going to break my entire layout. Right, because this this is the whole image and we see the entire thing there. Or I could come in with my logo, which is I think logo dot PNG. Right, so I could put that my logo there, but it's really big. And it doesn't make any sense to be coming in with this huge thing like that. If you're going to do this with a custom image, I would really recommend that instead, you know, have something like the burger icon I have, you want something very small, that is going to work because if it is too big, then it's just going to break everything. And I keep misspelling. There we go. I finally got it. But yeah, it makes sure that your icon is small. If you're going to use a list style image. Now there is another way that we can actually style these to make them look different. So what I'm going to do is let's turn off that list style image. And I do this a lot for my on ordered lists. And it's something called a pseudo element. So I'm going to do this on the allies. And I don't want to do it for these. I only want this on my on ordered lists. So I'm going to say UL space li and we'll we'll explore why in a second. But this is choosing my list items that are inside of my UL only. So only list items in my on ordered list. And let's say the color is going to be red. Just so we can see these don't change. But these ones down here did change. So I've only selected this bottom group. So taking off that red background, but I don't actually want to target the list items themselves. I'm going to come on this list item, and we do colon colon. And this might look really weird, but it's colon colon marker. And marker is kind of new. If you're watching old tutorials on lists, you probably won't see this. This is when you have a colon colon like this in CSS, this is called a pseudo element. And this is it's an element that's not really in the page. Like if I go and look in my HTML, I don't have those bullet points here anywhere. But the browser is adding those bullet points in. So it's sort of like a pseudo element and not real element, but it is an element because it's in the page, but it's not in my HTML. So we have a pseudo element. The amount of styling we can do on marker is a little bit limited. But one thing we can do is I can change my color. And if I change my color here, it's only going to change the color of the bullet points. Cool, right? And I can actually let's take off the UL, because you can do the same thing with your numbered lists. And of course, let's maybe turn this off just so we have 123. And you can see if you want to do that, you can definitely change it that way. Maybe you don't want it to be red, but you just want to change the color a little bit, a nice little subtle styling difference. And it can look really good. The reason I was selecting only the ones on my UL is because there's another thing that we can do in here, which is kind of fun, which is our content. And we can change the content to something else. And why this is fun is we're going to put this inside of quotation marks. And for now, it's just right ABC. Just so we can see it is showing up. And I can't actually select it because it's a bullet point. It looks like ABC, not really something I want to use. But we have that coming in. And, you know, of course, we'd never do this. But just to show you that it is possible. But where this can be fun is you can actually put emojis here. So I'm going to open up my emoji picker and let's put in the, I don't know, face palm for some reason. And now every one of them gets the face palm on there. So, you know, if you have something, maybe it's confetti or, you know, we have you're celebrating something in each one's a little celebration or whatever it is, and you have an emoji that you want to use, super easy to be able to do that. Or as I showed you before, very easy to be able to change the color of it as well. Now, I did mention that there's very limited styling that we have available for markers, we can do all of the font styling stuff that you might do. So we can come in here and change the font size of this. So let's just say it's, I don't know, 25 pixels to make it really big and it's bigger, or make it five pixels and it gets really, really small and I can barely see it. The problem now is one of the limitations is say we're like really close, maybe if we take that off, it's, you know, maybe we want more space in between these. And if I come on this, and I say that we have a margin on the right of 16 pixels, well, we can't do that because margin doesn't work on marker. So if we want to be able to add some space here, the way that we would do this is then I would go to my ULLI and you have a choice between margin and padding. I always get it wrong. I put margin first and it's not margin, it is padding that we need. So padding on the left side, left, and let's just do 21 pixels. So we have something there and you can see I've added a big gap here, 21 is way too big from what I normally do. Just so you know, let's put our border back on here, border, two pixels solid, I think the Dodger blue look good. So let's put that one back on. And you'll see it's adding that padding here. And so we're getting that space in between them. The marker is sort of like included in this border land. So the padding is going before my border and it's going before the marker I have here. If I came in and I did a margin left, and we'll do 21 pixels there as well, that's going to move everything over. So it's, you know, even though if we look in our dev tools here and we highlight it, and it looks like the marker is living within this margin area that's being highlighted in orange, it's actually not really in that realm, it's sort of in the border realm. So it's padding first, then the border slash marker, and then our margin after. So yeah. And anyway, it doesn't really matter. You try one of them. If it doesn't work, you try the other one. That's what I always suggest people do when they're trying to know if they should use margin or padding. It's always one or the other for extra spacing. So use the one that works well for you. And now there's one more thing that I want to talk about with lists and styling lists, and that has to do with alignment because I see something that people like to do sometimes, which is center alignment on stuff and center alignment in general should be reserved for very few situations because it's a lot harder to read. But let's go on this ordered list. And we're going to do a text align of center on there. And notice that these numbers stay all the way out here. And these move here. And it looks terrible. And we couldn't actually fix that with a list style position. And we can say inside. And that might be a sound like a weird word. But the default is outside. And remember when we did our padding and margin, we saw like the numbers, right, the numbered lists or the bullet points are sort of outside of the list. Now we're pulling them inside. So they move around with the list items themselves. And that's I can work if you have these single ones like this, because let's say I come over here and I say this is my thing three of three. It already gets kind of awkward looking. And then if we make this even, you know, let's come on our on ordered lists and do a text align text align of center. And then right my bullet point is sitting all the way out here and this is becoming centered and it just gets really awkward. And it wouldn't matter if it's inside or outside. So even though we can do a text align and then you can sort of fix things with this list style position, it never will fix it enough. It's always going to be kind of awkward and kind of weird. So unless like your boss is telling you to center align a list, please don't do it. And again, if you're watching this, I'm assuming you're pretty new to HTML in general and CSS. And going through this, obviously, we were looking at OL Li's and UL's. And you can see that I have a few other elements on here as well. And when you're first learning it at first, it can seem really simple. But as you're learning more and more, the list of elements can feel like just ballooning out of control and just more and more of them that you have to keep learning. And if you do feel a little bit overwhelmed by it, or you don't know which ones you really need to know right now, I recently put out a video that explored the elements that are the most important to know early on in your journey, you can find that video right here for your viewing pleasure. And with that, I would really like to thank my enablers of awesome, Andrew, Michael, Simon, Tim and Johnny as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.