Basic codes for CSS journal

Ok I don’t have any examples (except for my journal) but if you fallow what I say it’s really easy!!

Ok First,
Copy and past this into the space in your journal labeled "add CSS"! I will break it up into sections and help you fill it out!

.journalbox {
border-color: #------;
border-style:------;
background-color: #------;
color: #------;
font-family: -----;
font-size:--px;
text-align: ----;
}
.journaltop {
background-image:url(http://---------------------);
background-position:----------;
background-repeat: -----------;
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
padding-top: ------px;
}
.journaltop h2 {
background-color: #------; or
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
}
.journalbox .list {
background-color: #------;
color: #------;
font-family: ------;
font-size:--px;
text-align: ------;
}
.journaltext a:link {
color:#------;
font-family: ------;
font-size:--px;
}
.journaltext a:link {
color:#------;
font-family: ------;
font-size:--px;
}
.journaltext a:visited {
color: #------;
font-family: ------;
font-size:--px;
}
.journaltext a:active {
color: #------;
font-family: ------;
font-size:--px;
}
.journaltext a:hover {
color: #------;
font-family: ------;
font-size:--px;
}

.................................................
Notes:
American spelling only
Color= text color
Font-family= font style
Font-size= font size
Text-align= center, align left/right
You can choose whatever colors fonts you want.

……………………………………………..

Lets start with (Journal box) the section witch pretty much controls the entire journal:

.journalbox {
border-color: #------;
border-style:------;
background-color: #------;
color: #------;
font-family: -----;
font-size:--px;
text-align: ----;
}

Ok how you fill all that in. (remember in yours there should be no spaces)

border-color: #------;
This is the border of the journal.
Here we will use a hex code (color code) such as #000000 = the color code for black. You can find all the colors of the rainbow here http://www.december.com/html/spec/color0.html. You will use these color codes in every place that requires color. Example with black:
border-color: #000000;

border-style:------;
This is the style of the border. (This line is optional and can be left out.)
You can fill in the blank area with one of the following:

solid
double
groove
dashed
inset
outset
ridge
hidden

Example using solid:
border-style: solid;

background-color: #------;
Like it says it’s the background color of your journal  
Example with a white background:
background-color: #FFFFFF;

color: #------;
Hers the color of the journal's text
Example using black:
color: #000000;

font-family: -----;
Determines the font.
I recommend using the basic fonts because if someone viewing your journal does not have the fonts you have installed, the browser will select it's own default font:
Basic fonts:
Times
Vendera
Comic Sans MS

Example using Comic Sans MS:
font-family: ComicSansMS;

font-size:--px;
Determines the size of the font.
12px is considered an acceptable size.
Example with 12px:
font-size: 12px;

text-align: ----;
Determines the alignment of the text.
You can choose which ever setting you like: center, left, right or justify.
Example with center:
text-align: center;

You’re done with the first step the foundation it should look something like this:

.journalbox {
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
}

……………………………………………..

.journaltop {
background-image:url(http://---------------------);
background-position:----------;
background-repeat: -----------;
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
padding-top: ------px;
}


Moving on "journaltop” refers to the very top of the journal (the date and graphic)

background-image:url(http://---------------------);
Controls the image at the top of the journal.
I recommend using an image of about 900px wide by 250px high. After creating the image you would like to use upload it to a file server. I used Photobucket cause it’s easy!
Copy and past the URL provide to the space between the (…)
Example with my image:
background-image:url(http://i77.photobucket.com/albums/j63/Pinkcinnamon/my%20artz/Captivated_by_ENwings.jpg);

background-position:----------;
This is simply the placement of the image.
You can use: top center, top left or top right.
I have chosen "top left", so the line will look like this:
background-position: top left;

background-repeat: -----------;
Controls whether the image is tiled throughout the journal. I only want it on the top so I’ll use "no-repeat". Example:
background-repeat: no-repeat;

color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
This is the same as before just fill it in the same as before, unless you would like to use a different color than the mane journal.

padding-top: ------px;
Determines where the date is. I just used 200px the date and heading usually sit at the very top of the journal. This line of code brings it down. Example:
padding-top: 200px;

You’re all done with part 2, It should look similar to this:

.journaltop {
background-image:url (http://i77.photobucket.com/albums/j63/Pinkcinnamon/my%20artz/Captivated_by_ENwings.jpg);
background-position: top left;
background-repeat: no-repeat;
color:#000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
padding-top: 200px;
}

……………………………………………..


.journaltop h2 {
background-color: #------; or
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
}

This section of code controls the title of your journal

background-color: #------;
Instead of using a color here, I used "transparent" Because I wanted my background image to be seen. Example:
background-color: transparent;

I got lazy and so this is what my code looked like if you want throw you can change the color and font the same as before

My finished code:
.journaltop h2 {
background-color: transparent;
}

……………………………………………..

.journalbox .list {
background-color: #------;
color: #------;
font-family: ------;
font-size:--px;
text-align: ------;
}

.journalbox .list .a {
background-color:#------;
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
}

These 2 sections of code control the "moods" area of your journal.  

All you have to do is fill it in, I just assumed that each section did as it was labeled
Example:
Color= text color
Font-family= font style
Font-size= font size
Text-align= center, align left/right

.journalbox .list {
background-color:#ffffff;
color:#000000;
font-family: verdana;
font-size:12px;
text-align: center;
}

.journalbox .list .a{
background-color:#000000;
color:#ffffff;
font-family: verdana;
font-size:10px;
text-align: center;
}

I left this out on my journal.

……………………………………………..

.journaltext a:link {
color:#------;
font-family: ------;
font-size:--px;
}

This section determines how the links will look in the body area of your journal.

I chose firebrick red as the color its code = (:#CD0000). The font family and size should be the same as your regular text which we coded in the very first section (.journalbox). You can change them if you want.

Example:

a. link

.journaltext a:link {
color: #CD0000;
font-family: ComicSansMS;
font-size: 12px;
}

Now we move on to how the link will look when you click on it or hover over it, etc.
b: visited

.journaltext a:visited {
color: #------;
font-family: ------;
font-size:--px;
}

c: active
A link becomes active once you click on it.

.journaltext a:active {
color: #------;
font-family: ------;
font-size:--px;
}

d:hover

.journaltext a:hover {
color: #------;
font-family: ------;
font-size:--px;
}

These 4 sections need to go in this order.
a:link
b:visited
c:active
d:hover

Once you have filled in all the blanks, the section should look like this:

.journaltext a: link {
color: #CD0000;
font-family: ComicSansMS;
font-size: 12px;
}
.journaltext a: visited {
color: #FFE303;
font-family: ComicSansMS;
font-size: 12px;
}

.journaltext a: active {
color: #000000;
font-family: ComicSansMS;
font-size:12px;
}
.journaltext a: hover {
color:  #000000;
font-family: ComicSansMS;
font-size: 12px;
}

……………………………………………..

And now you are done. It’s not the most elaborate thing in the world but it gets your journal looking nice.

Example of my finished CSS code:

.journalbox {
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
}
.journaltop {
background-image:url (http://i77.photobucket.com/albums/j63/Pinkcinnamon/my%20artz/Captivated_by_ENwings.jpg);
background-position: top left;
background-repeat: no-repeat;
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
padding-top: 200px;
}
.journaltop h2 {
background-color: transparent;
}
.journaltext a:link {
color: #CD0000;
font-family: ComicSansMS;
font-size: 12px;
}
.journaltext a: visited {
color: #FFE303;
font-family: ComicSansMS;
font-size: 12px;
}

.journaltext a: active {
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
}
.journaltext a: hover {
color:  #000000;
font-family: ComicSansMS;
font-size: 12px;
}

I hope this helped… If I can figure out more tricks Ill make another lol!!!