HTML lists are used more often than beginning web development students often realize, and it can be very beneficial to learn how to style lists with CSS. In this tutorial, we'll look at the basic properties of lists that we can style, and we will also look at a new pseudo-class and a new pseudo-element that have not appeared previously in this tutorial series. If you are new to CSS, I recommend starting at the beginning of my CSS tutorials for beginners playlist: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
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.
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
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.
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;
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?
Hi Dave, great tutorial as always… just wondering if there is a difference between using the properties‘list-style’ and ‘list-style-type’? I typically see them used interchangeably, for example when declaring a value of ‘none’ to eliminate the list style. Thanks for all your help… Cheers 💖!
Yes, there is, but they can both be used. I cover both in this tutorial. list-style: is shorthand where you can specify one, two or three values for 1) type, 2) image and 3) position. Shorthand is available for many properties. It is why you see only background: (shorthand with other properties available to set, too) when many set background-color.
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!
Hi Dave. How long would it take to become a full-stack web developer ? I'm 40 and really hoping I still have time to establish myself in this line of work.
Code bootcamps promise as little as 6 months, and I'm not saying it isn't possible, but I'd say a couple of years of study will make a huge difference. There is no one set timeline. I also suggest working through the exercises at freecodecamp.org which will put you on the right path. 💯🚀
This is the best and recommended tutorial for beginners Thank you very much for the unpaid services you're rendering for beginners Pls, I have an issue with the Check mark styling of the list I downloaded a png Checkmark image and loaded it on my CSS to style the list item, instead of it coming out in small shapes like the one I'm watching in the tutorial, the Check mark image comes very big I've looked at my codes to see if there's any error but I can't find one Anyone pls help me out Thanks
Thank you! You can either resize your images before using them with an image editing app - and that is the best idea so you don't load a large image which increases load times - or you can follow the advice found on Stackoverflow here about using an html element to resize: stackoverflow.com/questions/57231618/how-to-resize-list-style-image
HTML lists are used more often than beginning web development students often realize, and it can be very beneficial to learn how to style lists with CSS. In this tutorial, we'll look at the basic properties of lists that we can style, and we will also look at a new pseudo-class and a new pseudo-element that have not appeared previously in this tutorial series. If you are new to CSS, I recommend starting at the beginning of my CSS tutorials for beginners playlist: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
Your lectures are really very helpful sir
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.
Thank you, Emil! 🙏
Probably the best teacher for Web Dev! Thanks Dave
Teaching is an art.
Good Job Dave. Appreciate your work.
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
You're welcome! 💯
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.
Thank you for the kind words! 🙏🙏
Done! Cool video tutorial, easy to follow. Thank you again, Dave!
Thank you for this incredible content. You are a great teacher.
Hi Dave Gray, You Are Awesome, Your Tutorials Has Really Helped Me Grow As a Developer... Thanks Man.
Great to hear! 🙏🚀
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.
Thank you for the kind words 🙏 I am adding one chapter per week until the course is complete. 🚀
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;
thank you for your tutorials, Georgian is Georgian alphabet, I am from Georgia. Greetings from Georgia
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?
Thank you, Dave
Sir i would like to know if you will be making tutorial on front-end frame-work(bootstrap)
Maybe in the future. I'm just focusing on completing this CSS series before looking too far ahead.
@@DaveGrayTeachesCode okay sir we really appreciate your effort
As always, great, flawless tutorial. Wish Dave could do Svelte Native tutorial. Wd prefer this library to Flutter for mobile app dev.
Thank you! 🙏💯
Excellent❤
So cool. Thanks Dave.
You're welcome!
Thank you!
Welcome!
Enjoying Css learning journey after Html Thank You So Much Sir
You are most welcome! 🙏
Hi Dave, great tutorial as always… just wondering if there is a difference between using the properties‘list-style’ and ‘list-style-type’? I typically see them used interchangeably, for example when declaring a value of ‘none’ to eliminate the list style. Thanks for all your help… Cheers 💖!
Yes, there is, but they can both be used. I cover both in this tutorial. list-style: is shorthand where you can specify one, two or three values for 1) type, 2) image and 3) position. Shorthand is available for many properties. It is why you see only background: (shorthand with other properties available to set, too) when many set background-color.
sir pls will you be making any tutorial on css preprocessor (SASS/SCSS)
Eventually yes, but not before I finish this CSS series. Good question and request! 💯
Can we set disc style in il too??
Its my interview qust
Hello Dave
Is there any way we can resize list-style-image ?
Hello Dave! Google provides: www.geeksforgeeks.org/how-to-resize-list-style-image-in-css/
@@DaveGrayTeachesCode thank you dave
Appreciate the help
Great video! :)
Thank you! 💯
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!
Hellow Dave! Thanks for a new video.
I began to learn TypeScript when the new video will come?))))
You're welcome! Do you mean when will a Typescript video be published? If so, later this year is the plan 💯
Hi Dave. How long would it take to become a full-stack web developer ?
I'm 40 and really hoping I still have time to establish myself in this line of work.
Code bootcamps promise as little as 6 months, and I'm not saying it isn't possible, but I'd say a couple of years of study will make a huge difference. There is no one set timeline. I also suggest working through the exercises at freecodecamp.org which will put you on the right path. 💯🚀
@@DaveGrayTeachesCode I was thinking 2 years would be necessary to call myself a qualified web dev. Thanks for answering.
Thanks Dave
great tutorials
Thank you! 💯
fantastic
You're welcome!
I seen your html video that was ultimate in terms of depth and no of attributes and css is no difference
sir i have a doubt that y do v need main tag or header tad or footer tag
You need to go to the HTML course and the chapter on semantic tags: ruclips.net/video/kX3TfdUqpuU/видео.html
This is the best and recommended tutorial for beginners
Thank you very much for the unpaid services you're rendering for beginners
Pls, I have an issue with the Check mark styling of the list
I downloaded a png Checkmark image and loaded it on my CSS to style the list item, instead of it coming out in small shapes like the one I'm watching in the tutorial, the Check mark image comes very big
I've looked at my codes to see if there's any error but I can't find one
Anyone pls help me out
Thanks
Thank you! You can either resize your images before using them with an image editing app - and that is the best idea so you don't load a large image which increases load times - or you can follow the advice found on Stackoverflow here about using an html element to resize: stackoverflow.com/questions/57231618/how-to-resize-list-style-image
My list image is massive 😭 like it takes half my page 😭 and I use a phone to code I can’t even understand the two dots inside the url
You either need to downsize your image using some software such as Irfanview, or I believe this should work too:
li {
background-size: 20px;
}