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:

text-align: center;

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!

Looking for quality phpBB Hosting? Look no further than Arvixe Web Hosting!