CSS

 Making a Box

So lets get started, we are going to make a coloured box
 So to do this we need the following HTML code;

 and add the following CSS

This will then place a 100x100 pixel in the top left of the web page.

Now we could have a go at adding a margin and a border to it, so to do this we add the following CSS code into the box

now we have a 1 pixel border around the box and you will notice that the box has been pushed down and to the right by 100 pixels.

Padding

Now we have used padding in a few examples before but lets have a look at what is padding. So padding is used as a buffer to push content inside elements so for example write up a <div> tag and shape it like a box like this

 and add the following CSS

now the padding is pushing the content down because its putting a buffer along the top of the box that is 30px in height. Now if we do this we have to take of 30px from the overall height. This is because the padding is added to the height so the hight would be 130px which is what we don't want.

More Boxes

Now we are going to combine the last two tutorials and make some red boxes and put them next to each other
So lets have a look at the code to do this, the HTML;

and the CSS

So lets now break this down what we have is a box class and we have created 5 div tags that use the box class so they all have the same properties.