How to create and style lists with HTML and CSS

Lists are one of the most common elements we have on websites, so I decided to do a beginner-friendly deep dive on them, exploring ordered and unordered lists, from how to create them, the difference between the two of them, their default styling, and how we can customize how they look with our own styles.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:39 - The two most common types of lists
04:12 - The importance of using the correct type of list
05:10 - An example of using them correctly
07:00 - The default styling of lists
11:00 - Understanding and changing the spacing of our lists
16:35 - Spacing between list items
18:40 - Colors with list items
19:40 - Changing the number or bullet point icons with list-style-type
23:00 - Changing the bullet point to a custom image
25:22 - Styling the bullet or number using ::marker
30:22 - The one thing you shouldn’t do with lists

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[westonjp]

Honestly, I learned way more from you Kevin than I learned in school. Love your videos. Thats pretty cool that you still help out the beginner users. You are an excellent teacher. I would love to see some JavaScript videos.

[JunieVM]

Kevin thank you, I'm already 48 years old studying IT after beings in Electronics field for almost 28 years. Your video helps me a lot to understand what I didn't get from the school. I'm very grateful that I learned so much from you.

[web-projektmanager]

nothing new for me, but its really great that you're going into this basic things. thank you!

[jennyvanessaquintocordobaq]

Hi Kevin, for a while I've wanted to thank you, since I followed you I've improved a lot my css skills and, definitively I don't feel frustrated with css anymore. So thank you so much for your daily work, videos, and commitment. (My English is enhanced as well all thanks to you). Jenny Q Colombia

[badcatdesign]

Thanks! Other interesting list attribute tricks are using ```reversed``` and ```start="5"``` on the ```<ol>``` for countdowns etc.

[diegognoatto]

i didnt know i could zoom in the dev tools, thats life saving for my workflow, tks

[crunchya]

Sincerely, some things were new for me, even though i work with lists everyday, thanks a lot for the tips and continue the great work

[pysco]

Hey Kevin, you are wonderful in bringing up very small stuff that make a big difference! I like your recommendation to use "margin-bottom" instead of "line-height". that was indeed my mistake with the list I am currently working on. Merci beaucoup Kevin!

[RichardCalder]

For the record I have been doing web dev since the days of HotDog HTML editor lol, some of us watch all your stuff. Also the comment about dev tools, reminded me of what a game changer Firebug was!

[NewRhodeshia]

Thanks Kevin, I whole heartedly appreciate what you do.

[iwpsurf]

Awesome tutorial! Your examples are clear and concise. Thanks for sharing your knowledge.

[MrOliver]

Thank you the ::marker was what I needed for the css! Thank you for that

[Jarrod]

Another thing to consider for new devs: margins on list items is one way of doing it, but consider:

ul, ol {
display: grid
/* some rem amount */
grid-gap: 0.5rem
}

You could flex-column it too. The advent of gap allows you to ignore having a separate margin rule for the :last-child

[DaMu]

An important tip for those who started with a high-level programming language before learning about HTML:
HTML doesn't care about line breaks or indentation.
Just tags, attributes and the DOM.

[Pareshbpatel]

CSS: Styling Lists so clearly explained . Thanks, Kevin.

{2023-10-10}, {2023-10-24}

[oraçõesdearuanda]

It's not new for me, but is always important remember what you study!

[spaceyraygun]

Wild, I had no idea <dl> got changed from "definition list" to "description list" in the HTML5 spec. I read it was changed for semantics, but repurposing an existing tag that was already packed with semantic meaning into one that is more general/generic seems silly to me. If you do make a <dl> video, I hope you touch on this evolution!

[saro]

can we use spaces inside the quotes of (content)?, like this for example:
ul li::marker {
content: "* ";
}
I tried it, and it worked

[rrd_webmania]

I use dl quite often. So I hope you really gona make a video about it.

[Mr.userx]

hi thanks for this helpfull video i have a question how can i make my order list to start from like 100 because it normal starts from 1 to...thanks in advance