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 : selects the html elements tag name
ex.) p { font-weight: bold; } -or- body { width: 100%; } 

2. Contextual  :  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 :  selects element by its given class attribute name
ex.) div.myclassname {...} -or- p.myclassname{...}

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

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

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

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

8. Psuedo Element : 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-letter
   4d :before
   4e :after

9. Link Psuedo Class : 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 : 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%

CSS3 : W3 Status: [ NA: modular ]

SELECTORS: W3 Status: Proposed Rec [ Dec 15, 2009 ]

1. :nth-child() : selects html elements based on order. can be varied based on even or odd child elements as well as other counting arrangements declared between the parenthesis. Read the following article for a deeper discussion by Chris Coyier of CSS Tricks http://css-tricks.com/5452-how-nth-child-works/
ex.)  li:nth-child() { font-weight: bold; } -or- body p:nth-child(3n+3) { background: black; }