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: kzread.info/head/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

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,

@DaveGrayTeachesCode

2 жыл бұрын

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!!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words, Andres! 🙏 I'm glad this helped! 🚀

I've tried to set border-radius: 50% instead of 50px and it also made the circle. Thank you for the video!

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!

@DaveGrayTeachesCode

2 жыл бұрын

Glad I could help, Tyler! 🚀

I really like how detailed are your explanations - it's really a professional way to explain subject. Step by step. Thanks a lot!

@DaveGrayTeachesCode

2 жыл бұрын

You're very welcome!

Thank you Dave. You really help us making progress.🚀

@DaveGrayTeachesCode

2 жыл бұрын

My pleasure! 💯

Done! Thank you for this tutorial video, sir!

Awesome video!

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..

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! I'm glad to hear that I've helped you! 💯🚀

@spiritual5750

2 жыл бұрын

@@DaveGrayTeachesCode the impact that you are creating is impeccable. 😁💙

Learning is so cool, and teaching is such a noble task.

@DaveGrayTeachesCode

Жыл бұрын

Thank you, Gabriel! 🙏

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🎉🎉🎉🎉

@DaveGrayTeachesCode

Жыл бұрын

Glad it was helpful!

Thank you, Dave

Dave I think flexbox or flex would naturally be a great followup to this video. But great video as always

@DaveGrayTeachesCode

2 жыл бұрын

Thanks! Flexbox and Grid are coming soon. I'm covering typography first. 🚀

@devstuff92

2 жыл бұрын

@@DaveGrayTeachesCode Waiting on grid and flexbox :)

@fabrice9848

2 жыл бұрын

@@DaveGrayTeachesCode I can't wait.👍

Like your videos. Thank you!

Thank you, I listened to your CSS tutorial and it was great. I sent you ☕☕☕☕☕!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you so much for the support, Hersi!! 🙏☕☕

Thank you Dave!

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Thank you!

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

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 .................

@DaveGrayTeachesCode

Жыл бұрын

Thank you!

Nice. Fundamentals are always important.

@DaveGrayTeachesCode

Жыл бұрын

Absolutely!

Really like ur vids, ur are awesome!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 🙏🙏

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.

Top Right Bottom Left -> 360° clockwise 😀

should have mentioned about margin collapsing (vertical), great video

@DaveGrayTeachesCode

Жыл бұрын

Thank you! It is a long playlist. I think the topic you mentioned is eventually discussed.

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{...}

☑ remaining ==> outline and turn a box into circle

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

@DaveGrayTeachesCode

2 жыл бұрын

Thank you and great suggestion!

here is the another way to create the circle without using border-radius clip-path: circle()

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.

@DaveGrayTeachesCode

2 жыл бұрын

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

@Valdaur

2 жыл бұрын

@@DaveGrayTeachesCode Ok, thanks for your response! :)

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?

@DaveGrayTeachesCode

Жыл бұрын

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.

@liudmyladolzhenko516

Жыл бұрын

@@DaveGrayTeachesCode Okay, I understand and will try to do it. Thank you so much for answer.

How to place a div on another div

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.

@DaveGrayTeachesCode

Жыл бұрын

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.

Your Student H :) Forever

to create a circle: br:0.5% ou 50%;

try F12 🙂