Selector Sampler

standard selector allows you to create a style that applies to one tag.
h1 {font-weight:bolder; font-variant:small-caps;}

multiple selector creates a style that is applied to more than one selector (seperated by commas).
p, em, h2 {font-style:italic;}

contextual selector starts with the selector on the right, it defines the characteristics of the target. In the example below, the browser will look for any "span" tags that reside inside a "p" tag.
p span {font-weight:lighter;}

contextual selector (child) will look for the child (the tag on the right of the > sign) of the tag on the left. This means that these two tags must have a parent-child relationship.
h1>em {text-transform:uppercase;}

when to use an ID versus Class:
if you have a single instance on a page that you wish to apply a CSS rule to, you should use an ID. There can only be a SINGLE instance of each ID on a given page.
if you have a number of different areas on a page that all require the same styling, then you should use a class. A class can appear many times on a given page.

universal selector is used when you would like to apply a style (or many styles) to ALL tags on a page.
* {text-align:center;}

adjacent sibling selector requires that the two tags are 1) siblings and 2) next to each other in the html markup.
h1 + p {line-height:25px;}

attribute selector is defined by having both a tag and an attribute. In the example below, the browser will look for any "img" tag that is followed by a title attribute.
img[title] {border:10px dashed #FF0000;}

pseudo-class is often used on anchor tags. It is not necessary to use all four states of the following (most likely will not use the active state).

1. a:link {color:#008000;}
2. a:hover {color:#ADFF2F;}
3. a:visited {color:#7CFC00;}
4. a:active {color:#90EE90;}

other pseudo-classes can include :first-child (find the first instance of a specification within a tag) and :focus (follows the style when a user clicks the field).
p.sample em:first-child {line-height:20px}
input:focus {border:3px solid #0000FF;}

pseudo elements include x:first-letter and x:first-line. The first-letter sample below will create a drop-cap effect at the start of each block element and the first-line will apply style to the entire first line of each block element.
p:first-letter {font-size:300% float:left;}
p:first-line {color:#FF0000 font-weight:bold;}