tags: CSS

CSS Box Model

What is CSS

This is how we style our websites. There are many different ways to go about adding styling to your website but at the root of them all it comes down to CSS.

What does it stand for?

Cascading Style Sheet.

How can we use it?

There are 3. Main/Basic ways to implement styling into your website.

1. External - (highly recommended) A .css document that is linked to your html documents.
2. Internal - This is added into the head tag of an html document
3. Inline - This is where we add CSS properties directly into an HTML Element.

These should in most cases be used in the order listed above. Using external means that every page that had the link will get the same styling applied to it as long as the tags or elements are the same, If you need to change something that is on every page but just for 1 page you could add a class name to that element or use internal styling. Finally if you can't get the element that you want to be styled the way you want it to then you would want to use Inline.

Note that both Internal and Inline will only effect the document or element on that single document only.

What is Box Model?

EVERY element in an html document is a box. And WILL follow the box model.

This is a great picture of what the box model is.

Lets picture a shed in your back yard to describe the 4 layers

1. Content - This is the inside of your shed. Where your man or girl cave is. Or maybe it is a gardening shed. Either way this is where you would stand to look at the contents
2. Padding - This is the walls and insulation. In the case of a shed it tends to have a fixed depth but it is that layer of space that in this case holds insulation.
3. Border - Well this is the outside of your shed. The siding. What you will see looking from the outside at the shed. It is what definds the outline of sorts that will contain the shed.
4. Margin - This is that space around the shed that you can walk. Can't be seen since it is space but it's what keeps your shed from touching your house or another shed. In most cases you have to have a certain amount of space between buildings. Thats the margin…that space you need between.

Now lets put it in terms of your website, am image to be specific. Our image size is 250 x 250px. For this I have added 2 pictures to show how it changes when styling is added.

By default in box model terms this is what you have

1. Content 250 x 250px
2. Padding 0 x 0px
3. Border 0 x 0px
4. margin 0 x 0px

Notice on the right you can see that the picture size and everything else just has a - meaning no size is given.

Now lets add 10px of padding. We will give the images a background color of black for this so you can see the differences a little better

Notice now that the images has black around it, but it isn't a border, if you look on the right it is in the padding section.

Now lets add a solid red 5px border to our images

Almost looks like we have 2 borders, so lets take out the black background part so you can see a little better

Ah thats better. Now we can see that as we have not set an background color that 10px of padding is still there but it's invisible or the same as teh background for the whole section. and on the right on both these 2 pictures you can see on the right that padding is still 10 but now we added a 5px border.

So now lets add 10px of margin around the images. This one will be a bit harder to see because it will always be invisable.

However you can see the images are now further apart from each other as well as not at the top or the all the way to the right of the grey section. And on the right you can see each section in the box model picture has a number filled it.

Why the box model is so important

Simply put knowing what the different parts are means you know how to align things on your page. This comes extremely important when it comes to styling your pages to be mobile friendly.

If my phone is only 350px wide only 1 of those images at a time will show up.

With all the extra things we added my picture is not 250x 250px anymore either. Now it is 300 x 300px. Yes you read that right.

Got the Box Model now what?

Now we get to understand how we added the padding, margin, border, color and so on. So here are some of the most used styling attributes

• Background color
  • background-color: black;
    • Gives the element a black background
  • background-color: #800080;
    • Give the element a purple using hex.
• Font color
  • color: white;
    • Give the element font a white color
  • color: #800080;
    • Gives the element font a purple color using hex
• Border
  • border: 5px solid red;
    • Gives the element a solid red 5px wide border
  • border: 10px groove #800080;
    • Gives the element a groove style border that is purple and 10px wide
• Padding / Margin
  • padding: 10px;
    • Gives 10px of padding all around the element
  • margin: 10px;
    • Gives 10px or margin all around
  • padding: 5px 10px;
    • Gives the element 5px of padding on the top and bottom and 10px on the right and left
  • margin: 5px, 10px;
    • Give the elememtn 5px of margin on the top and bottom and 10px on the right and left.
  • padding: 5px 5px 5px 10px;
    • Give the element 5px padding on the top, 5px padding on the right, 5px padding on the bottom, and 10px on the left. (always in this order top, right, bottom, left)
  • margin: 5px 5px 5px 10px;
    • Give the element 5px margin on the top, 5px margin on the right, 5px margin on the bottom, and 10px on the left. (always in this order top, right, bottom, left)
  • margin: auto;
    • In most cases this will help center your element.

There are tons of other attributes you can use to style your webpage but for now these are the ones you will use on nearly every page.