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 brea k 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 bl ack. You can find all the colors of the rainbow here http://www.december.com/htm l/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 n ot have the fonts you have installed, the browser will select it's own default f ont: 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 caus e 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%20art z/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 th e 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%20ar tz/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 backgrou nd 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 cha nge 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 si ze should be the same as your regular text which we coded in the very first sect ion (.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 y our 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%20ar tz/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!!!