Welcome to the third part in the "Make Your CSS Journal" series. This series is here to help you make your own journal stand out from the rest by giving all sorts of tips and tricks and learning parts of CSS you can use on your journal.

For this article, all instances of < and > have been changed to [ and ] to work on the news article. Make sure to change them back

The Margin
Ahh, the margin, what is the margin? The Margin is the transparent border outside of your div, you can't see it, but it's there. It can allow you place your divs somewhere on the page. If you to make just a simple div box with a width of 200. It would be on the left side of the journal right? (Well, unless you have a text-align: right or center on your journaltext css.)

Let's apply this margin of ours.

.margin{
width: 200px;
height: 100px;
background: #821122;
margin: 0 auto;
}

[div class="margin"][/div]

Our margin is set as 0 auto. There are different ways you can do this, 0 is the top and bottom, auto is the left and right. You can also have a number by itself, example:

margin: 5px;

This will set the margin to 5px all around the div. Or, you can do it seperately.

margin: 5px 10px 4px 11px;

Top, right, bottom, left... make sense?

The auto I used will set the box staight dead in the center.

The Padding
Sounds like some kind of old cult horror movie title eh? The Padding... So, what's the padding? This is the transparent space inside the box, obviously leaving less space inside the box. Great to not have any text straight next to the borders. So the CSS in this.

.padding{
width: 200px;
height: 100px;
border: 1px solid #821122;
padding: 5px;
}

Go on, try it, then try it without the padding on. The padding element is the same as margin, so here it's 5px all around (or inround the box).

Padding will make your box expand; you can easily fix this though by taking away the padding on the left and right side in total from the width, and the total padding on the top and bottom from the height.

So in this case, width - padding on top - padding on bottom = new width.
So it's 200 - 5 - 5 which is of course, 190 for the width. And the same with the height but from 100, so 90.

(Don't worry, I don't think you're a bunch of dumb people, but it's a way to explain this.)

Visualize The Journal
Time for visual pleasure... no not nudity, I know you want me nude but just no. Images! How to use images in your journal, specially a background.

For this example, I will use the background url in the CSS in order to create a header. With this, is where padding can come in handy. Below is the CSS code I have.

.journalbox{
background: #FCFCFC url('{imagelink}') repeat-x;
border: 2px solid #333333;
padding: 134px 0 0 0;
}

You need to change {imagelink} with the link to your image.

The repeat-x means to repeat the image on the x-axis, which is horizontal. There is also repeat-x which is vertical, repeat which is everywhere, and also no-repeat which means don't repeat... obviously.

The other change we have is the padding settings, I've now changed from 0; to adding all four, the 134px is the padding at the top, this moves everything down from the top by 134px, thus showing my header fully.

That's it for part 3, and before I part, some looks at the CSS Journals.

*IdealEric - A great example of what CSS can do for your journal.

*MysticMo - Simple CSS being used to create this dark themed CSS Journal.

=axentric - Now this is a nice Journal. Great use a 2 column layout.

*lockjavv - Good use of extra divs boxes. And nice use of a 2 column.

*ginkgografix - Nice example of a basic CSS Journal. With what I've said in these first three parts of this series. You should be able to make something like this pretty easily.