CSS List Styles Tutorial for Beginners

Learn CSS List Styles in this tutorial for beginners. Styling HTML lists with CSS can add impact to your HTML content. You will learn how to style lists with list-style-type and many other useful properties.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS List Styles Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:26) Setup
(02:21) list-style-type
(04:27) Useful HTML attributes
(05:32) Removing list item styles
(05:53) The unordered list
(06:10) list-style-position
(07:10) List items inherit typography
(07:43) list-style-image
(08:33) list-style shorthand
(09:38) List item styles
(10:25) nth-child pseudo-class
(11:21) ::marker pseudo-element
(15:10) One more helpful HTML attribute

⚙ Web Dev Tools:

📚 References:

📚 Typography Resources:

📚 Color Resources:

✅ Follow Me:

Was this tutorial about how to style HTML lists with CSS helpful? If so, please share. Let me know your thoughts in the comments.

#css #lists #styles

[kelvinwong]

Probably the best teacher for Web Dev! Thanks Dave

[namizo_des]

Hello 👋🏻 In this video you hoped someone would understand "list-style-type: georgian;" symbols. Actually it's georgian alphabet 🇬🇪 . I am from Georgia (a small county near the Black Sea) and this video made my day ❤. I am always extremely happy to see Georgian things out there on purpose or not 🤣. P.S you are a brilliant tutor, THANK YOU 🤠 i'll buy you plenty of coffee ☕

[JayantBB]

Teaching is an art.
Good Job Dave. Appreciate your work.

[emilnikolov]

Hi Dave. Your tutorials are very good and very easy to follow. Your teaching skills are excellent. The moto "Strive for progress over perfection" is so simple and powerful. It is pleasure following your channel. Btw georgian is the language of the country Georgia (ex USSR republic called Gruzia) located on the east coast of the Black sea.

[alirezahekmati]

keep making quality content that's what makes you stand out from the rest the only reason I came back to youtube is your channel.

[nasssty]

was really happy when you chose Georgian as list-style-type Dave! im from Georgia and im watching and learning from your tutorials. you are the best! thank you

[milanotv]

Hi Dave Gray, You Are Awesome, Your Tutorials Has Really Helped Me Grow As a Developer... Thanks Man.

[louiidelosreyes]

Done! Cool video tutorial, easy to follow. Thank you again, Dave!

[grigoldvali]

thank you for your tutorials, Georgian is Georgian alphabet, I am from Georgia. Greetings from Georgia

[aliben]

Thank you for this incredible content. You are a great teacher.

[abdulganiyusanni]

Good day Dave, am new to web development since the time have been trying to learn even through paid courses, your tutorial is the most complete and understanding course have ever seen sir. i had finished taking your html course recently and it is a wow so i decided to continue my carrier pathway with your html tutorials.sorry sir, i would like to know when this your css playlist will be complete, i just started and i can see you are still updating the course sir.i will be very glad if the remaining playlist is out as soon as possible.i await your reply sir, thank you sir we really appreciate your effort and good work.

[nadeemhussain]

Enjoying Css learning journey after Html Thank You So Much Sir

[firemonkey]

Finished the HTML course and now working through the CSS stuff. Took me a while playing with the syntax but found that you can use the nth-child pseudo class along with the ::marker pseudo-element. I guess that there is a certain order you have to list the different parts of the selectors in?

[andromilk]

I was under the impression that the stack order would have started like this : list-style: url("images/checkmark.png") square; as opposed to the inverse which you did? The reason I'm saying this is because in the video about fonts/font-family, the stack order was always from left to right : font-family: "Roboto", sans-serif;

[NATAR]

As always, great, flawless tutorial. Wish Dave could do Svelte Native tutorial. Wd prefer this library to Flutter for mobile app dev.

[caramelbutterflycreations]

Hi Dave, is there a way to make only the word Step Bold in each list item but keep the other weights normal for the number? Not necessarily on both lists, thx!

[davesharma]

Hello Dave
Is there any way we can resize list-style-image ?

[abdulganiyusanni]

Sir i would like to know if you will be making tutorial on front-end frame-work(bootstrap)

[LavaLegacy]

no one thought like singham again will be this huge and create the noice like never before

[abdulganiyusanni]

sir pls will you be making any tutorial on css preprocessor (SASS/SCSS)