CSS

This is pretty easy once you get used to it. If you're not familiar with it then you might be a little confused at first but just take it one section at a time. Cascading style sheets help edit the way your website looks without having to type "font color=000000" and all that everytime you type something. They change your background, your font, your font color, your scroll bars, table colors and link colors. There's other stuff, but those are the basics.

1) Open notepad or some other HTML editing tool. At the top you want to type <style type="text/css"> and then one line under that type <!-- so it should look like:

<style type="text/css">
<!--

2) Next you can change your scrollbars :)! Type:

body
{ scrollbar-face-color: #EFFBFC; scrollbar-highlight-color: #EFFBFC;
scrollbar-3dlight-color: #D0EBF3
scrollbar-shadow-color: #D0EBF3
scrollbar-darkshadow-color :#EFFBFC;
scrollbar-track-color :#EFFBFC;
scrollbar-arrow-color :#EFFBFC;
}

You don't have to use those colors, of course. That's just an example from my style sheets.

3) Next you can edit your background and text.

body
{
background: url(IMAGE URL); < This is what you'll type if you want to add a background image to your site.
background: #COLOR; < This will change your background color to whatever you want. If you were using iframes and you wanted a transparent background so that the background for your layout showed up then you would type transparent in place of where the number was supposed to be.
font-family: verdana; < You don't have to use that font, obviously. That's just the font I always use so I thought I should put an example.
font-size: 7pt; < This changes the font size. I like my fonts to be small so I use 7pt but most people use somewhere from 7 to 10.
font-color: #COLOR; < This changes the font color. I just used black, so that would be #000000.
text-decoration: none; < There's a lot of stuff you could set this to, but I'm boring and simple so I kept it at that.
font-weight: bold; < You would put bold if you wanted it bold, if not then you would just type none.
border: 1pt solid #000000; < This styles your borders, for instance when you use a textbox, or tables with borders.
} < Use that to close this section.

4) Now we'll style the links!

A:link
{
color: #COLOR; < Obviously the changes the color of your links.
font-family: verdana; < You could make your links a different font than the rest of your text, but I kept it simple and stuck with verdana.
font-size:7pt; < Again, you can have any font size you want. I just always use 7pt. text-decoration: none; < Some people like to make their fonts underlined or something to make them stand out. You can do a few things with this.
font-weight:bold; < Change this if you like. I make my links bold so they stand out a little better.
}

A:hover < When you roll over a link sometimes they change, right? Well, this is what we're editing now.
{
color: #COLOR; < This will change the color when you roll over a link.
font-family: verdana;
font-size:7pt; < Some people like to make their links get bigger (or smaller) when their visitors hover over them. You can change that with this.
text-decoration:none; < If you want your links to be underlined when you hover over them you could put underline in place of none. Some people put little boxes around theirs.
text-transform:none; < There's a few things you can do with this but if you're a beginner with css it's best to keep it simple.
font-weight:bold;
cursor:crosshair; < There are lots of cursors you could put here. Sadly.. I forgot most of them. I'll try to add the different types on here eventually. Crosshair is just what I use when people hover over my links.

A:visited
{
color: #COLOR; < You can change the color so that visitors know what links they've already visited on your site. I usually keep mine the same color. I'm not sure why but I just like all the links being the same color.
font-family: verdana;
font-size:7pt;
text-decoration: none;
text-trandform: none;
font-weight: bold;
}

A:active { color: #COLOR; < This section is so you can change how the link looks once it's clicked and while the next page is loading, so you put whatever color you want the link to change to when you click it here.
font-family: verdana;
font-size:7pt;
text-decoration:none;
text-transform:none;
font-weight:bold;
cursor:crosshair;
}

textarea < This edits your textareas.
{
background-color: #COLOR;
font-color: #COLOR;
font-family: verdana;
font-size:7pt;
font-weight: none;
border: 1px #COLOR solid;
}

There's more you can do, of course, but those are the basic things. Now, I save my css files as css.css but you can save it as whatever you want as long as it ends in .css. You'll put this in the <head> </head> tags on your pages.

You'll have to copy and paste your HTML to every page on your site unless you use this neat little code. ;)

In the same place you'd normally put your css you should put:

<link rel="stylesheet" type="text/css" href="style.css> < You shouldn't put style.css unless that's what you named your css file. For example, mine would be: <link rel="stylesheet" type="text/css" href="css.css>.

Just put this code on every page on your website and you won't have to change every page of css when you make a new layout. You just change your css file and all the other pages change with it.

Hope this helped!