So, here we are, another CSS lesson. What do I plan to teach you today? Well, a couple of things, in my last Lesson, I discussed padding and borders among other things. Those are all part of what is called the “Box Model.” I’ll finish up discussing that theory with outline and margin. After that, we’ll look at lists and tables, probably in the next tutorial. So here’s what you’ll learn today:

• margin
• outline
• tables

Margin

Margin is the outermost part of the “Box.” It’s right beyond the border and there is nothing beyond it in the model. It works almost just like padding except it’s OUTSIDE of the border and it is always transparent. I hope you read my last article because setting up a margin works the same way as setting up any other part of the box.

margin: 10px

This will create a 10 pixel margin all around your border. If no border is present, then around your content. You can set the margins separately for each side:

margin-left: 10px

margin-right: 5px

margin-bottom: 15px

margin-top: 20px

Read my about padding to learn about the shorthand. I’ll just summarize the above as an example:

margin: 20px 5px 15px 10px

Also, you can set the margin to “auto” which will trigger the browser’s default setting.

Outline

Outline works similar to the border but it is outside of the border and inside of the margin. It’s always a line, but you can adjust the thickness. Actually, it’s JUST like the border. Just look:

outline-color: blue;

outline-style: dotted;

outline-width: thick;

Color is self-explanatory. As for style, you can use “none”, “dotted”, “dashed”, “solid”, “double”, “groove”, “ridge”, “inset”, and “outset”. There is no “hidden”, mind that. If you want to see how each of these look, go to CSS: Lesson 2 article and check the borders. The link is somewhere above for it. For outline-width, you can use “thin”, “medium”, “thick”, or an actual numerical value (10px, 50%, 2em). Here, the difference is, you cannot set these properties for each individual side of the outline. Here is an example:

p.outline {
outline: blue dashed thin

}

Example text

Tables

Let’s move onto tables. Make sure you know the HTML code for tables well. Let’s review anyways. Here’s how you make a simple table with two headers, two rows, and two columns

<table border=”1″>

<caption>My Simple Table</caption>

<tr>

<th> Numbers </th>

<th>Letters </th>

</tr>

<tr>

<td> 1</td>

<td>A </td>

</tr>

<tr>

<td>2</td>

<td>B </td>

</tr>

</table>

My Simple Table

Numbers	Letters
1	A
2	B

Here’s the basic structure, you start the <table>, you can define the <th> which is headings or the <caption>.  Then, first <tr> for row, <td>for the columns. Close the tag after each term, etc. Read up on it, it’s easy stuff.

Let’s move onto the CSS. The first property to look at is table-layout which has two values “fixed”, and “auto”.

Let’s look at the difference:

Fixed table

Numbers	Letters
100000000000000	A
200000000000000	B

Auto table

Numbers	Letters
100000000000000	A
200000000000000	B

I had to add width=”100%” to the table tag to REALLY show you the difference. As you can see, the “auto” makes the table adjust so that it compensates for the difference of content in the table. Here’s a neat property called empty-cells which can make the empty cells either “hide” or “show”. Unfortunately, the default CSS settings in WordPress won’t allow me to show you that. Just try it out in wordpad. Next property is called border-collapse with the values “separate” and “collapse”. Here’s the difference:

Separate

one

two

Collapse

one

two

That was fun, there’s also border-spacing with a numerical value (23px, 3em, etc) wherein you specify how far the borders are. After that, there’s only caption-side which determines where the caption will be. It has two values “top” and “bottom”. Let’s look at a table with a caption on the bottom. WordPress, once again, doesn’t seem to want to show border spacing. I’m not sure why, but that’s alright. I used <table style=”caption-side:bottom; border-spacing: 20xp” border=”1″> , as you can see in the example below, the border-spacing did not work (even when I set the border-collapse to separate):

Caption

one	two	three
four	five	six
seven	eight	nine

Anyways, that’s it again. I hope you enjoyed reading the tutorial. In my next tutorial, we’ll tackle lists, which is a very important part of CSS because using lists, you can create amazing nav bars. I’ll show you all of that.

Also, as per usual, the header of the article:

<table style=”border-collapse: collapse; table-layout: auto; margin: 20px 30px 40px; outline:ridge thin; caption-side:bottom” border=”0″><caption>
<h1 style=”font-size: 50px”>CSS</h1>
</caption>
<tbody>
<tr>
<td width=”100%”>
<h2 style=”font-size: 25px”>Lesson</h2>
</td>
<td width=”100%”>
<h2 style=”font-size: 25px”>3</h2>
</td>
</tr>
</tbody></table>

I also set a 40px top margin on the paragraph below it.