Hello and welcome to another installment of CSS3 for beginners we have covered so much stuff its crazy! But fear not readers for there is even more to cover! Today we are covering Boxes and Borders! It’s some pretty awesome stuff although it can be pretty long to code out so let’s take our time and take some deep breaths because you are in for a long one!
Let’s first start by discussing Boxes. Let’s look at how boxes are broken up!
Content: This is the part that is filled up by your text, image, video etc.
Padding: This is the space between the edge of your content and the border.
Border: This is the area around the Padding
Margin: This is outside of the element’s border and also what separates one element from another.
What does this look like?
So the image above really explains what each part is! So how can we do this you ask? Well here is what we will use:
<figure> tags will help us to embed certain things in our HTML. The code will looks something like the following:
<figure id="home-image"> <img src="yourimage.png" width="400" height="400" alt="my image!"> <figcaption class=caption"> It's a caption! </figcaption> </figure>
So as you can see above that we just insert our figure where ever we want our image to be. We set an id type so that in our CSS we can customize it to our liking! So what would this look like in our HTML document?? Well take a look at the image below and you will see!
You can see how seamlessly it interacts here now let’s edit the CSS properties as well!
Again it’s pretty easy stuff so let’s go into more depth about Margin and Padding.
Margin there are few very important things you need to know about Margins:
The margin doesn’t have a background color
The margin is outside of the border
Margins “collapse” in certain cases what are these cases you ask? Well this happens when two margin elements are stack on top of each other and one of them isn’t used. The default is that the bigger margin is used so for example: if we had a margin that was 20px and one that was 30px then the one that is 30px would be used!
So let’s looks at some easy elements with Margins:
margin-top: specifies top
margin-right: specifies right margin
margin-bottom: specifies bottom margin
margin-left: specifies left margin
Now let’s take a look at padding! You can use the following in padding:
padding-top: sets padding on the top
padding-right set’s padding on the right
padding-left set’s the padding on the left
padding-bottom set’s the padding on the bottom
Now for margins and padding there is a shortcut in order to save you some time here. If all four sides are the same you can specify these without having to type it every time you would do this by:
margin: 10px 10px 10px 10px make sure that you specify 4 sides though.
Next is borders you would use the element border-style in order to do this the following is the properties you can use:
none: this set’s no border so one isn’t displayed
dotted: this shows a border made up of dots
solid: this is a border made up of one solid color
double: this is a double border made up of a color
groove: this borders has a 3D groove effect
ridge: this has a 3D ridge effect
inset: this makes the box appear to be inset or embossed
outset: this makes it appear to be raised up
You can specify things with border as such:
border: width style color;
So the width is how big you want it the style is dot or groove etc and the color is exactly that color! So an example would be:
border: 1px grooved green;
Now included in all of this is text alignment this is pretty quick and easy stuff the proper code for this is as follows:
or you can use
left: which aligns it left
right: which aligns it right
justify: which gives each line equal length
inherit: specifies that the current element has the same text-align as its parent element.
So what does all of this look like in a CSS file?
And in our browser we can see our dotted border!
Well that’s it for today’s lesson! Again if you have any questions please feel free to ask away in the comments!