Shop Mobile More Submit  Join Login
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.

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.

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.

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.
Add a Comment:
ZeppTokyoASK Featured By Owner Jun 9, 2007
celtic-mistress Featured By Owner Mar 27, 2007
putting up a journal image background and thumbnails won't work :(
Gmarconato Featured By Owner Mar 15, 2007  Professional General Artist
Thanks more one time^^
Taclobanon Featured By Owner Mar 14, 2007   Digital Artist
keep em coming and i'll have a css journal up in no time.
dot-Silver Featured By Owner Mar 15, 2007  Hobbyist Interface Designer
Don't worry they will ;) And i'm glad they can help you
maverick-decadence Featured By Owner Mar 14, 2007
The timing for this is perfect as I'm just in the middle of 'pimpin' my journal! Thanks for the great explanations!
leaf-lover Featured By Owner Mar 14, 2007
Great little series you've got going here. It would be wonderful if you complied this into a tutorial with images next to every code so we can see exactly what each bit does and does not do. :aww:
dot-Silver Featured By Owner Mar 14, 2007  Hobbyist Interface Designer
Well you wait for #6 ;) It's gunna be a full advanced CSS Journal.
leaf-lover Featured By Owner Mar 15, 2007
Neon98071 Featured By Owner Mar 14, 2007   Digital Artist
Been trying to figure out how to use CSS for a while, thanks for writing these articles. :D
ginkgografix Featured By Owner Mar 14, 2007
While searching for Graydas news article i found yours. Like them :thumbsup:
Good idea to explain the basic css things.

And thanks for adding me to this one :aww:
dot-Silver Featured By Owner Mar 14, 2007  Hobbyist Interface Designer
Add a Comment:

:icondot-silver: More from dot-Silver

More from DeviantArt


Submitted on
March 13, 2007


93 (who?)