HOW TO CODE! { by Danni.

[DANNIMARIE *]

Well, first of all, we shall start with the basics of the most simple code there is, a div tab with a width, height, and background color set.

Text in this box will not do anything but be white because I have not added anything in the coding to make it a different color. 

Now that I have added a color in here, using the button up on top (because I only wanted this section to be black) I will explain how I centered the box. With proboards, the align:center; tag does not work in the div style tag. So you need to select the entire table and hit the center button up on top but this must be done in the BBCode section, simply because it is easiest to view what you are doing and because you can't select the entire table in the Preview tab.

CODES USED IN THIS BOX:
height:300px; 
width:300px;
background-color:#d0d0d0;

Next, I will show you how to add padding inside the box, which will set it so your font is a certain amount of pixels away from the edges of the box and clean it up with text inside. This can also be used to set how far inside you want another div tab, which can be found below.

With this, I have changed the color of the font within this entire box, so now everything will be visible easily inside this box. 

Now, one thing to know when using padding. A padding of 5px, you will get a padding of 5 pixels all the way around the table. Padding is not included in the height and width that you have set, and so in order to get a box that is 300 x 300 pixels, you have to subtract 10 pixels from the overall width and height, making the size in the coding (only in the height and width sections) 290 x 290 pixels. You have to subtract 10 pixels because it will add 5 pixels of padding to both the left and right AND top and bottom. 

CODING INCLUDED IN THIS BOX
height: 290px; width290px; 
padding:5px;
background-color:#d0d0d0; (font) color: #303030;

This box has a second div box inside of it which can be used for styling. Just to make it easier to see, I will be making the colors of the second box opposite to the first.

Text inside this box can be edited to look awesome
as well. you can use either the tag styles in the div tag, or you can make them pretty using the buttons provided by proboards up along the top. either will work just fine. 

CODING IN THIS BOX:
width:290px; height:150px;
background-color:#303030;color:#d0d0d0;

This box can be used for any content as well. Just make sure that you pay close attention to the div tags. If you have a box inside of a box, start your font in the next div tag, ignore the first, skip past it, and work between the first and the second. 
CODING IN THIS BOX
width:29px; height:290px;
background-color:#d0d0d0; color:#303030;
padding:5px;