With CSS, one of the big things you’ll need to do is position your elements. You may have used something like <table width=’100′ height=’100′> in the past, problem with that is it’s not valid. I’m trying to teach people valid code 
If you don’t understand anything in this article, either leave a comment with a question, or refer to the previous post (the one before my apartment vid). This ended up being pretty lengthy, so grab a glass of water and get comfortable 
The best element to use for positioning/padding/margins etc is the <div> tag. Next easiest is the <p>, and tags like <span>’s and <a>’s can be moved around and have the height changed with a bit of extra work.
We’ll start with what you do for <div>’s and <p>’s:
Width and Height:
CSS:
.pixels
{
width: 400px;
height: 400px;
}
.percentages
{
width: 70%;
height: 50%; /*Though % heights don't always work as expected */
}
Examples
<div style='width: 400px; height: 300px;'>Test</div>
Tips
In general, most people have a resolution of at least 1024px by 768px. This means you probably don’t want a width greater than about 950px.
Padding
CSS
.all_around
{
padding: 20px;
}
.left_right
{
padding: 20px 0;
}
.top_right
{
padding: 20px 20px 0 0;
}
.left_pad
{
padding-left: 20px;
}
Examples
<style type='text/css'>
.mydiv
{
padding: 2px 10px;
}
</style>
<div class='mydiv'>Test</div>
Tips
If you just enter one value, ie the all_around class above, it will pad all four sides.
If you specify two numbers like the left_right class, it will pad the top and bottom with the first number, and left and right with the second.
If you specify all four numbers like the top_right class, it will put the padding in clockwise order. So top, right, bottom, left.
Margin
CSS
.all_around
{
margin: 20px;
}
.left_right
{
margin: 20px 0;
}
.top_right
{
margin: 20px 20px 0 0;
}
.left_pad
{
margin-left: 20px;
}
Examples
<style type='text/css'>
.mydiv
{
margin: 10px 0;
}
</style>
<div class='mydiv'>Test</div>
Tips
The order of top, right, left, bottom is the same for this. And again, use padding when you have a background color for your element and you want some space so the text isn’t smushed up against the edge, use margin when you want space between elements.
Centering an element
<style type='text/css'>
.container
{
width: 800px;
margin: 0 auto;
}
</style>
<div class='container'>Whatever</div>
Aligning your element in the exact center of the page (what’s above just centers horizontally), you want to do something like this or use some javascript.
Just a random tip that I can’t really write a full blog post for, there’s an order to which elements can be inside which. Basically, don’t put a <div>, <p>, <h1> (h2, h3 etc) inside of a <span> or <a>
Well that was a lot of text, hopefully you’ll find some use out of some of it. Funny thing about me doing these tutorials/posts on CSS is CSS was the last thing I became fluent in, learned HTML -> PHP -> Javascript -> CSS.
Next up is more advanced positioning/padding for stuff like links and spans.
