Borders

4 minutes
Share the link to this page
Copied
  Completed
Lear how to make your world shine with borders.

Transcript

Hello, in this CSS Crash Course video, we're going to be covering borders, I was going to do a brief overview of a border. So first of all, let's just create a div tag you can create honestly wherever you want. And keep it simple. Create a div div. And now, what we're going to be doing inside here, we're just going to put Hello, world. Save that refresh.

So go ahead a world div here. We go on to that. We go on to this part here. So we've got the core element, got padding, which we covered in the previous video for margin, which will also be covered in the previous video. And now we're going to be covering border Once you've done this video, I recommend you start combining border and margin and padding and to actually see the differences in the cut the moment the previous video We just covered we just did margin and padding separately, recommend combining them if you haven't, because they can be combined. And we borders to distinguish between us all really cool stuff.

So what we're going to do is add a story or add some padding 100 pixels. So let's save it. So there we go. And now what we're going to do is put a border, there's three different sort of attributes that you need to affect for properties, I should say effect for border free main ones Balderdash style, which is something I dashed. So you can get this obese be a dashed one solid would be a solid line, and there's dotted as well. border, dash width.

And you can even use pixels, unit units, em, whatever you want. On this gonna say free pixels, then you put a border with the color of the border, as usual stuff like border star because he has other values that you can supply to these attributes or recommend going on to the Wi Fi schools website, have a look at the border style section and learn more about it. So is the best way to refresh. As you can see, we now have a border around our element. If we were to get rid of the padding, zero here, save that refresh as it sees just around the element to ourself in terms of hyperness bring back the pad in. What we're going to actually do is add a margin.

I'm going to do what we're always talking about combining movement, padding margin, and put 25 pixels, save that refresh. As you can see, we've got some outside words done if we go to a body Dave Got the core contents here and padding and the border to the margin which is outside. And to finally, to illustrate this, we're going to add a background color of white color. Text refresh. And as you can see, the actual color only affects the border. And the padding as well does not affect the margin, which we covered in the previous video.

So there you go. board is very, very cool stuff. I'm sure you've been using it a lot. We've only covered actually how to apply a border. All around but you can apply a border on the left on the top or the broad term, right wherever you want, really, and you can play different ones. recommend you have tried googling and find out?

It's not very hard, I'm sure you can probably see here is the border dash, the one that you want. So yeah, that'd be a great way of learning and just making sure your skills are on point with borders and CFF. But if you have any questions, feel free to post it on my education platform. So no learning Dakota, UK, there will be a link in the description. First, there'll be a link for all source code from the series. If you liked the video, or if you didn't, please let us know.

We're always looking for feedback. And as usual, thank you for watching and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.