CSS REFERENCE GUIDE

This is a collaborative page written by participants and organizers. The goals of this page is to create a best practices guide for referencing those often forgotten bits of CSS we should know quickly.

Maybe you forgot how to write the important rule, or maybe you need a quick reference for a css selector.

CSS 2.1 : W3 Status: Recommendation [ June 7, 2011 ]
 

SELECTORS:

1. Element Type Selectors : selects the html elements tag name
ex.) p { font-weight: bold; } -or- body { width: 100%; } 

2. Contextual Selectors :  determined by the elements context or it's containing element AKA the "parent"
ex. ) p strong { color: #000; } -or- body div#main { float: left; } 

3. Class Selectors :  selects element by its given class attribute name
ex.) div.myclassname {...} -or- p.myclassname{...}

4. ID Selectors : selects element by its given id attribute name
ex.) #myuniqueid -or- p#myuniqueid

5. Child Selectors : element(s) that are direct descendants or otherwise "children" to the containing parent element.
ex.) p  > h1 {...} -or- img > span {...}

6. Sibling Selectors : element must immediately follow the first element
ex.) h4 + p -or-  div + h1

7. Attribute Selectors : 
ex.) img[src] -or-  p[id="unique_id"]

8. Psuedo Element Selectors : formatting for elements that lay outside the DOM tree
   4a :first-child
   4b :first-line ( applies special styles to the contents of the first formatted line of a paragraph )
   4c :first-leter
   4d :before
   4e :after

9. Link Psuedo Class Selectors : Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree
   5a  :link
   5b. :visited

10. Dynamic Psuedo Class Selectors : Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree
   6a  :active
   6b. :hover
   6c. :focus

11. Universal : matches any element type
ex.) * {..} -or-  *div {...} + *h1 {...}

12. Descendant : matches an element that is a descendant of another element in the DOM tree
ex.) h1 em {..} -or-  div p  {...} + p strong {...}
 

FORMATTING

1. Font Sizing : suggested unit should always be em unless % is desired
ex.) font-size=12px or font-size=1em or font-size=100%