An element with a given ID can be styled in CSS using '#' followed by the given ID. The HTML standard states that IDs are unique and will only correspond to one element.
For example:
#header-logo { background-image: url(''/images/logo.jpg') no-repeat center center; }
Elements with a given class can be styled in CSS using '.' followed by the given class. Any number of elements can share a class.
For example:
.blue-box { background-color: #99f; border: 1px solid #333; margin: 10px 0; height: 100px; width: 100px; }
Bonus points:
Unless the HTML is non-standards compliant, styling an element of a given ID should never include the element's parents or its own tag name.
For example, this is bad:
p#intro-paragraph { font-size: 12px; margin: 10px 30px; }
It will first look at every <p> tag, then compare each of them against the ID "intro-paragraph".
For efficiency, this will do:
#intro-paragraph { font-size: 12px; margin: 10px 30px; }
Also, it's possible to chain classes in CSS:
.blue-box.first-box { margin-top: 0px; }
Note that older versions of internet explorer (as recent as 7 I believe) do not support this.
For an element with both classes "blue-box" and "first-box", be careful not to write this as ".blue-box .first-box { ... }".
This is because the space between the classes indicates a parent-child relationship and so it will look for an element within the blue-box with a class of first-box (undesired).</p>