Boxing Continued with CSS

Transcript

Welcome. Today we are going to learn about styling borders.

Lets go!

Last lesson, you learned about the content box and the margin box. You might have noticed two more boxes called padding and border. 

Lets start with borders. You can change the color and the style of the border box, in addition to how wide it is. The border goes right around the content of a tag. Here's what a border style solid looks like around the heading.  To code this, I gave the border style solid to all four directions. 

But I only want my h3s to have a border bottom. See how the border shows up all black and skinny. That's because the default color of a border is black, and the width is about two pixels. If you don't like the default, you can use two more properties. Just add the word color after the direction to change the borders color. 

You can do the same with width, which you give a pixel value. I gave my border bottom width a value of two pixels and the border bottom color white smoke. 

The border bottom is too close to my content. If you want to put more space between the tags border and its content, you have to change the padding box. I know what you're thinking enough with the boxes. But stay with me these boxes are super powerful. They give you so much control over how much space things take up on your page. And since you already know how to code the margin properties padding will be a breeze. 

You start with the word padding, followed by a hyphen and the side. I made the padding bottom four pixels instead of zero. See how the border bottom moved down but the content stayed in the same place. It's also cool to check this out in the dev tools. Look, if I hover over the second box, it shows me where the padding is.

That's borders and padding. But what about border properties? That's coming up next lesson. 

See you shortly.