So in the first one, we learned how to create our first basic CSS Journal. But now it's time to learn a bit more yes? Make your CSS Journal stand out a bit more with adding some of your own bits and pieces into it. In the this article, I will be replacing all < and > with the characters [ and ] so that the code will show properly.



Sub Headings

With CSS Journals allowing internal divs, it's very easy add extra bits into it. A comment usage is sub heading, just like using the bold text on news to define a certain area of the article. You can find them almost every where.



.subhead{

border-bottom: 2px solid #821122;

font-family: Courier New, Courier, tahoma, arial, verdana, sans-serif;

font-size: 16px;

}



We set a border bottom, a font-family and size. You can do more if you want, such as backgrounds, more borders, etc.



[div class="subhead"]Heading Title[/div]



More Internal Divs

Internal divs is a great way of showing extra bits off, whether it's news, or stamps, or features work, etc. Anything.



Internal divs are divs that we use inside the journal but not pre-made ones like the journal itself.



.thumbnails{

background: #333333;

color: #CCCCCC;

text-align: center;

padding: 5px;

}



[div class="thumbnails"][/div]



You can add as many thumbnails as you want in there. We define a background colour, colour of any text being used, and we set them to be in the center. When we don't define a width, it will just automatically be 100%.



Styling thumbnails

So we have our special section for the thumbnails, what about adding an extra border onto these or something?



.thumbnails img{

border: 6px solid #FCFCFC;

}

.thumbnails img:hover{

border: 6px solid #821122;

}

We add a border of 6px wide, when the thumbnail is hovered we change the border colour. Simple as that really.

Scrollable Divs
What if you are showing a lot of thumbnails but you don't want your journal to be very very long right? Well, we could put the thumbnails into a div that has a set height, and will scroll up and down.

.scroll{
position: relative;
overflow: auto;
width: 100%;
height: 200px;
text-align: center;
background: #561420;
}

And the div code.

[div class="scroll"]Thumbnails Here[/div]

!important
I would just like to clarify a fact, because a lot of people use this little unneeded bit in their CSS, which of course, just makes the page load a bit slower than it could. It is a fact that you do not need to add !important to the end of all your CSS elements, example:

text-align: center !important;

Not needed... delete that !important!

That's all folks
Well that's all for this series, but I would like to finish off with some CSS Journal features (not including mine)

=ElementsUnleashed - Simple yet effective, and a nice combination of colours.

*zeolyte - A design that I enjoy, and a great way of keeping the dA colours too.

*Nicasus - Got to admit, pretty clever design? So clean and professional looking too.

*steward - Ok ok... Not the best CSS design, but it's a good example to a basic CSS Journal.