CSS REFERENCE GUIDES [Sept. 5, 2011, 5:34 p.m.]

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 ]

CSS 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.) p.myclassname {...} -or- div.myclassname {...}

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

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

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"]

CSS FORMATTING

Font Sizing :