reference to some of the basics...

Hello again.
I've been looking for some basic reference materials, however, seems everyone, even here, assumes a certain "basic knowledge".
Example - in some of the CSS file examples you use, you use a "pound symbol" such as
#item {
blah: blah;
}
and I have no idea what the # is about.
I know that the example below works because I have a div I've called "content" by using a "class=" in the DIV, I know that if I used body {background-color: white;} it would apply generically to body and I've been able to center and modify my header text using the h1 section in the example below. But what's the # and @ about, and how can I apply to a <SPAN> - or even when should I use SPAN?for example?
I see you all put things like:
#content {
margin-left: 45px;
margin-top: 12px;
margin-right: 40px;
margin-bottom: 50px;
}
so what's the # do here?
or even

.content {
margin-left: 45px;
margin-top: 12px;
margin-right: 40px;
margin-bottom: 50px;
}
what is called "content" in this case? how can you use just a dot then the name?

I guess I'm trying to figure a lot of this out myself to quit bugging everyone here but can't find basic references as to when to use what. My issue now is to center horizontally an image I use at the top of each page. I can use the <P> tag and center the P but then I get the carriage-return/linefeed resulting in too much space below it. I want to center it and not have any other effect. (center in the viewable space, or body)
Where's the "dummy's guide to CSS"?

div.content {
background-color: white;
Background-Image: url(../bgrnd.jpg);
Background-Attachment: fixed ;
Background-Repeat: No-Repeat ;
background-position: top center ;
margin-left: 45px;
margin-top: 12px;
margin-right: 40px;
margin-bottom: 50px;
}

h1 {
font-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-SIZE: 22px;
COLOR: #000000;
text-align: center;
font-weight: normal;
margin-top: 0em;
margin-bottom: 1em;}

Shadows Papa