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 to a css selector. Once this information is gathered we can then begin to create an HTML version that can be shared via github that is usable and helpful in our daily routines. All selectors must be implemented by all major browsers and may include vendor prefixes. 

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

SELECTORS:

1. Element 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"]

4. 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

5. Psuedo Class Selectors : formatting for elements that lay outside the DOM tree
   4a  :link
   4b  :visited
   4c. :hover
   4d. :focus
 

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%