CSS Help

[KILL3RTACO]

I decided, since it took a lot of work for my profile, to make a CSS tutorial for whoever needs it. I will be teaching how i wish i was taught. I haven't figured out all of them yet so bear with me...

here's what i have for my profile:

a:hover { (this is what happens when your mouse is over a link)
color: black (color of text)
font-family: "Comic Sans MS"; (font family)
text-decoration: bold; (if mouse is over link, text will be bold. doesn't have to be bold)
font-size: small;
}

.tcat {
background: gray;
color: white;
}

.thead
{
background: black;
color: white;
font: bold 11px "Comic Sans MS";
}

.panel
{
background: gray;
color: black;
padding: 10px;
border:1px solid white;
}

.tborder
{
background: gray;
color: black;
border: 1px solid white;
}
.alt2 {
background: gray;
color: black;
}

.alt1 {
background: black;
color: gray;
}
(alt1 and alt2 have something to do with the text color and background color in certain areas off your public profile)
.panelsurround
{
background: black;
color: red;
}

legend {
color: black;
}

.outer_border {
border-left: 5px solid whitw;
border-right: gray;
}

.tfoot
{
background: black;
color: white;
}

.vbmenu_control
{
background: gray;
color: black;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}

.time { (this will be for the areas in time of your profile ex: when you last visited, how long ago a visitor message was, etc.)
text-decoration: bold;
color: black;
}

a:link {
font-family: "Comic Sans MS";
color: white;
text-decoration: bold;
font-weight: none;
}

body, h1, h2, .page { (body background is the left and right of our profile; the h in h1 h2 stand for heading. h1 is background of your username, h2 for your custom user title)
background-color: black}

#pborder {
background: gray;
background-image: none;
}

.outer_border { (outer of your profile. if u go to mine, you'll see mine is red)
border-left: 5px solid red;
border-right: 5px solid red;
border-top: 5px solid red;
border-bottom: 5px solid red;
}

textarea, .bginput
{
background: gray;
color: white;
font-weight: bold;
}

.smallfont, dd.smallfont, dt.smallfont { (i really have no idea what this is. i dont even know why i put it in)
color: red;
}

table.page, tr, td.tfoot, .time {
color: red;
}

Everything before the "{" is called a selector. if you what more than one selector, separate them with commas. everything within the "{" "}" modifies the selector.

example:

selector(s) here { background-color: color}

the "background-color:" is kinda like a selector within the "{}" whatever is after the colon is modifying what was before it

all of this may sound confusing, but if you gather more a little more info, you'll get it for sure!