To truly comprehend CSS, you need to have a good understanding of the CSS Box Model and all of the layers within. This tutorial covers each layer of the box model and how to apply styling to them. In addition, you will learn how to turn the box into a circle if you want! If you're just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Understanding box-model is essential if you really want to learn css, The outline doesn't take up space so it can be useful for highlighting input controls according to their validity status, I personally use 50% for border-radius to avoid doing unnecessary calculations, and although I don't know how to apply it properly but we can specify different values for both horizontal and vertical radius of the border, this will give us more control over the shape of the box corners by simply using value pairs in the form of (ex: 50px / 25px) for each corner, Keep up energized Thanks Dave,
This is the best css box model explanation I've seen!! I can see that understanding the box model I can layout much better elements on the screen. Also, you mentioned a good number of properties that I didn't know about, in addition, you articulate greatly when you speak, it's a communication skill that every teacher should has. Thanks a lot!!
I see why learning this is all about practice and repetition. I will be doing this exercise a few more times as there are a lot of things to know. Thanks Dave!
you are amazing dave at explaining and elaborating concepts. Trust me i have made notes on css, could not contemplate them your tutorials made them sensible to understand learning at a exponential rate..
Best tutorial ever.I enjoyed the teaching method,clearing elaborating on the topic..I have absolutely understood the box model now after searching a lot of tutorials but never got a satisfying understanding.Thumbs up great Tutor🎉🎉🎉🎉
I liked your content actually. your kind of explaining the topic with some sense of humour is very likeable and make me more excited to learn more. you are sharing a more Knowledge at free of Cost then a Paid courses .................
Dave, thanks for the great video. I remember the order Top Right Bottom Left as just clockwise. One question I had regarding specifying 50% for border-radius to make the box a circle - why is that number significant? Are there any good use-cases for using outline? - I read the comment by Ahamed, but did not fully understand the practical utility of using outline.
Hi, when I change the h1 to .container with the same data(margin, padding, font-size, ...), the content overflows the border however this is not the case with the h1, any solution? h1{...} vs .container{...}
I Wordpress we use to first inset section like flex box and add everything to it Nd elements don't act like containers.... Learning CSS after Wordpress seems Too different... We start every with flex box in wordpress and in CSS we learn Flex box at last.....
So from what I am understanding: The border shorthand is different than with padding and margin, because you cannot use the border shorthand declaration to specify different widths for each side. You instead need to use declarations such as "border-top", to specify the colour, style and width for each specific border side. Although I suppose you would rarely use different widths for each border side so I guess in that regard it's fine.
You are correct, IG. The border shorthand is useful when you want the sides to be the same. Many individual properties do exist for changing each side, but the shorthand does not support it. developer.mozilla.org/en-US/docs/Web/CSS/border
I keep getting my outline as a box around the circle. What am I doing wrong? My code is EXACTLY yours, down to the color .circle { margin: 3rem auto; background-color: gold; width: 100px; height: 100px; border: 2px solid black; border-radius: 50px; outline: 2px solid red; outline-offset: 0.35rem; } /*border-radius can also use %*/ What am I missing? I have the circle, and I have the border, but the effect for the outline isn't cascading down. Even when VSC only has the code of the circle.
Please review again. When you have different results, there must be a difference. A browser will read the CSS the same way every time. I can review a specific part of the video if you provide a timestamp.
Hello Dave! Thank you so much for your amazing videos and opportunity to learn coding with you. But I have a question about a circle. How can I multiplay it, if I need one circle, one square and triangle of various sizes. Could you help me to understand it right please?
You're welcome! I think you are asking how you can multiply it? As in, how can you make more than one circle, square, triangle, etc of various sizes? You could create a class that will make apply the rules to make a circle, another for square, and another for triangle - except for the size rules. Then add a separate class that adds the rules for the size you want. Maybe make small, medium, and large size classes like a CSS framework does (see Bootstrap, Tailwind, etc) Then apply these classes as needed.
To truly comprehend CSS, you need to have a good understanding of the CSS Box Model and all of the layers within. This tutorial covers each layer of the box model and how to apply styling to them. In addition, you will learn how to turn the box into a circle if you want! If you're just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Understanding box-model is essential if you really want to learn css,
The outline doesn't take up space so it can be useful for highlighting input controls according to their validity status,
I personally use 50% for border-radius to avoid doing unnecessary calculations,
and although I don't know how to apply it properly but we can specify different values for both horizontal and vertical radius of the border, this will give us more control over the shape of the box corners by simply using value pairs in the form of (ex: 50px / 25px) for each corner,
Keep up energized
Thanks Dave,
Thank you, Ahmad 🙏 Great suggestions! 💯
This is the best css box model explanation I've seen!! I can see that understanding the box model I can layout much better elements on the screen. Also, you mentioned a good number of properties that I didn't know about, in addition, you articulate greatly when you speak, it's a communication skill that every teacher should has. Thanks a lot!!
Thank you for the kind words, Andres! 🙏 I'm glad this helped! 🚀
I really like how detailed are your explanations - it's really a professional way to explain subject. Step by step. Thanks a lot!
You're very welcome!
I see why learning this is all about practice and repetition. I will be doing this exercise a few more times as there are a lot of things to know. Thanks Dave!
Glad I could help, Tyler! 🚀
you are amazing dave at explaining and elaborating concepts. Trust me i have made notes on css, could not contemplate them your tutorials made them sensible to understand learning at a exponential rate..
You're welcome! I'm glad to hear that I've helped you! 💯🚀
@@DaveGrayTeachesCode the impact that you are creating is impeccable. 😁💙
I've tried to set border-radius: 50% instead of 50px and it also made the circle. Thank you for the video!
Learning is so cool, and teaching is such a noble task.
Thank you, Gabriel! 🙏
Dave I think flexbox or flex would naturally be a great followup to this video. But great video as always
Thanks! Flexbox and Grid are coming soon. I'm covering typography first. 🚀
@@DaveGrayTeachesCode Waiting on grid and flexbox :)
@@DaveGrayTeachesCode I can't wait.👍
Best tutorial ever.I enjoyed the teaching method,clearing elaborating on the topic..I have absolutely understood the box model now after searching a lot of tutorials but never got a satisfying understanding.Thumbs up great Tutor🎉🎉🎉🎉
Glad it was helpful!
here is the another way to create the circle without using border-radius
clip-path: circle()
I liked your content actually. your kind of explaining the topic with some sense of humour is very likeable and make me more excited to learn more. you are sharing a more Knowledge at free of Cost then a Paid courses .................
Thank you!
Thank you, I listened to your CSS tutorial and it was great. I sent you ☕☕☕☕☕!
Thank you so much for the support, Hersi!! 🙏☕☕
Thank you Dave. You really help us making progress.🚀
My pleasure! 💯
Top Right Bottom Left -> 360° clockwise 😀
Thank you!
You're welcome!
Awesome video!
Like your videos. Thank you!
Done! Thank you for this tutorial video, sir!
Nice. Fundamentals are always important.
Absolutely!
☑
remaining ==> outline and turn a box into circle
Thank you, Dave
should have mentioned about margin collapsing (vertical), great video
Thank you! It is a long playlist. I think the topic you mentioned is eventually discussed.
Dave, thanks for the great video.
I remember the order Top Right Bottom Left as just clockwise.
One question I had regarding specifying 50% for border-radius to make the box a circle - why is that number significant?
Are there any good use-cases for using outline? - I read the comment by Ahamed, but did not fully understand the practical utility of using outline.
Thank you Dave!
You're welcome!
Dave,big fan here ?
Where can I share some ideas for your next series of videos ?
Would love if you take up RxJs + React !!
Thanks a lot
Thank you and great suggestion!
Hi, when I change the h1 to .container with the same data(margin, padding, font-size, ...), the content overflows the border however this is not the case with the h1, any solution? h1{...} vs .container{...}
I Wordpress we use to first inset section like flex box and add everything to it Nd elements don't act like containers.... Learning CSS after Wordpress seems Too different... We start every with flex box in wordpress and in CSS we learn Flex box at last.....
So from what I am understanding: The border shorthand is different than with padding and margin, because you cannot use the border shorthand declaration to specify different widths for each side. You instead need to use declarations such as "border-top", to specify the colour, style and width for each specific border side.
Although I suppose you would rarely use different widths for each border side so I guess in that regard it's fine.
You are correct, IG. The border shorthand is useful when you want the sides to be the same. Many individual properties do exist for changing each side, but the shorthand does not support it. developer.mozilla.org/en-US/docs/Web/CSS/border
@@DaveGrayTeachesCode Ok, thanks for your response! :)
Really like ur vids, ur are awesome!
Thank you! 🙏🙏
I keep getting my outline as a box around the circle. What am I doing wrong? My code is EXACTLY yours, down to the color
.circle {
margin: 3rem auto;
background-color: gold;
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50px;
outline: 2px solid red;
outline-offset: 0.35rem;
}
/*border-radius can also use %*/
What am I missing? I have the circle, and I have the border, but the effect for the outline isn't cascading down. Even when VSC only has the code of the circle.
Please review again. When you have different results, there must be a difference. A browser will read the CSS the same way every time. I can review a specific part of the video if you provide a timestamp.
Hello Dave! Thank you so much for your amazing videos and opportunity to learn coding with you. But I have a question about a circle. How can I multiplay it, if I need one circle, one square and triangle of various sizes. Could you help me to understand it right please?
You're welcome! I think you are asking how you can multiply it? As in, how can you make more than one circle, square, triangle, etc of various sizes? You could create a class that will make apply the rules to make a circle, another for square, and another for triangle - except for the size rules. Then add a separate class that adds the rules for the size you want. Maybe make small, medium, and large size classes like a CSS framework does (see Bootstrap, Tailwind, etc) Then apply these classes as needed.
@@DaveGrayTeachesCode Okay, I understand and will try to do it. Thank you so much for answer.
How to place a div on another div
to create a circle: br:0.5% ou 50%;
Your Student H :) Forever
try F12 🙂