standard selector -
h1 {color:#000000; font-style:italic;}
Description: A single tag is selected followed by the styling desired.
multiple selector -
h1, h2 {color:#000000; font-style:italic;}
Description: Two or more tags, each separated by a comma, are selected followed by the styling desired for all of them.
contextual selector -
h1 strong{color:red; font-style:italic;}
p strong{color:blue; font-style:italic;}
Description: Looks very similar to the multiple selector, except there are no commas between the selectors. The declaration applies only to the selector closest to it. In the first example the styling applies only to a strong tag that is inside an h1 tag . In the second example the styling applies only to strong tags inside p tags.
contextual selector child
div >h1{font-style:italic;}
Description: This works the same as a contextual selector except that it is more restrictive as it limits the styling only to a child of the first selector. In this case only if the h1 tag is a child of the div tag, not a grandchild or greatgrandchild.
when to use a class and when to use an id
class selector sample: .saleitems {color:red;}
id selector sample: #sidebar {width:200px; border:1px solid blue;}
Description: You use a class when you want to be able to style multiple elements on a page. It's selector begins with a period or dot. You use an id to identify a unique piece of page markup. An individual id can only be used once on a page and is often used for enclosing markup for the navigation bar, footer and sidebar, etc. An id selector starts with a hashmark (#).
universal selector
* {color:red;}
Description: An asterisk will make the style apply to any tag able to receive the type of styling in the properties.
adjacent sibling
h2 + table{margin-top:5px;}
Description: Any two elements added together with a plus sign will style the second element as declared as long as the second element follows the first element in the code. It doesn't matter if there is text between the two elements. In this case, any table following an h2 tag will have a top-margin of 5 pixels.
attribute selector
h1[class] {border-bottom:1px solid black;}
Description: This is an element, followed by an attribute in square brackets. It will apply to any class in an h1 tag.
pseudo classes
a:active {color:red;}
Description: A psuedo class is the style that applies to an element when it is being activated. The only psuedo-classes I know have do to with hyperlinks. While clicking the mouse button down, the link is activated.
other pseudo-class
a:hover {color:blue;}
Description: a:hover is activated by rolling your mouse over it. This is what the link looks like when you roll over it but don't click on it.
psuedo-elements
p:first-line{font-style:italic;}
Description: Adds style or inserts content to a portion of an element. This one adds style to the first line of the paragraph it's used on.