Hello everyone. I know I said I was going to start off these tutorials with styling your text but I thought it would be better if I quickly went over the 'base codes' of every single layout you make, literally. I did do a tutorial on this a while back, but that was before I made this tutorial thread public. Anyway, let's go ahead and start.

The 'base code' consists of three parts, the 'table' or 'wrap,' the background layer, and the 'visible' layer which contains all of your text and stuff. This code is what I use every single time I code a layout, and it's pretty easy to do.

The first part of this code goes like this:

< div style="width:(the width of your layout)px;margin:auto;" >

*remove the spaces between these < >

Always adjust the width to what you'd like it to be in order to have your layout completely centered. The 'margin:auto' by itself does not work, so the width is something that must be included. However, if you want your layout to go either left or right replace the 'margin:auto' for 'float:(left or right);' (and you don't need the second part if so).

The second part goes like this:

< div style="width:(width of your layout, same as the code above)px;float:left;background-color:#______;" >

Now, this may not seem really necessary, considering that it's almost the same as the first part of this code, but trust me, it is. The 'float:left' part of this code is pretty useful when wanting to add a 'background-color' that applies to the entire layout (which is optional), since, again, the 'margin:auto' in the first part of the code does not allow the 'background-color' to apply to the entire thing.

The third part is up to you, because that's where you add your own code. (I'll do some tutorials on that later...)

The finished product should look something like this:

< div style="width:500px;margin:auto;" >
< div style="width:460px;border:1px solid #EEE;float:left;padding:20px;" >
< img alt="giphy.gif" src="http://media.giphy.com/media/mte1ow4EH6ARq/giphy.gif" style="width:460px;" / >
< div style="font-family:calibri;font-size:10px;color:#666666;text-align:justify;line-height:11px;" >
< p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.< /p >
< /div >
< /div >
< /div >

Preview:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

That's basically it. Feel free to use the codes above as base codes, I don't mind. I'll try to make another tutorial soon. Please comment or pm me on what you'd like me to do a tutorial on next. Leave your questions below, too. I won't be able to help you out if you don't.