Kind of a second part to the Make your CSS Journal but not making a whole journal though.

Just some tips and tricks.

Sub headings

Make sub headings like the one above can be used with extra divs. With a subscriber, you are allowed to use div tags in your journal, so how do we make a sub-heading like above? Well if you add this to where you want your heading to go

< div class="subhead">Heading Title< /div>
Note: Spaces between the < and div should be taken out.

And add something like this into the CSS box, changing anything you want.

.subhead{
border-bottom: 2px solid #821122;
font-family: Courier New, Courier, tahoma, arial, verdana, sans-serif;
font-size: 16px;
}

This is the css that I used for the sub heading above.

More internal divs

Time to learn more about internal divs, these are divs that we use inside the journal but not pre-made ones like the journal itself. What about making areas for thumbnails or featured news, etc? Making them a different colour.

Well first off, add another div class naming it "thumbnails" or something (like we did with the subhead) and the CSS is as follows.

.thumbnails{
background: #333333;
color: #CCCCCC;
text-align: center;
}

This will turn our like this.


Styling the thumbnails

We can style these thumbnails if you like with adding an extra border around them to make them stand out more, and also having the border change colour on mouse over.

.thumbnails img{
border: 6px solid #FCFCFC;
}
.thumbnails img:hover{
border: 6px solid #821122;



Scrollable divs

Pretty simple. But what if you're showing a lot of thumbnails but don't want the journal to be so long? Well a simple CSS styles div will help with this making a div box scrollable.

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

The div goes on just like the others.


!Important

If you look at a lot of CSS for the journals made by others. You'll probably notice that they add !important at the end of just about all of their CSS statements, for example, background: transparent !important;

It is a fact that you do not need to add this to your CSS, so it's a waste of time. Don't do it

Ok so that's it for now. Now you should be able to make your own basic Journal CSS and also add a few of your own div elements into it. With the next part, we'll start using images in our journal, and learn about the margin and padding elements as well as a few bits more.