1. CSS3  http://www.css3.info/ http://www.css3.info/  https://browserlab.adobe.com https://browserlab.adobe.com  http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/ http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/  None of the CSS3 modules are complete.  Developers already including elements of CSS3 even though it is not finished.  Your pages do not have to look the same in every browser.  BUT ensure that your websites work for all site’s visitors.

2. Child Selectors Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

3. Child Selectors Beginning with second item select every 4 th items Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

4. Child Selectors table tr:nth-child(odd) { background-color: #efefef; }

5. Multi-column layout -moz-column-width: 13em -webkit-column-width: 13em -moz-column-gap: 1em -webkit-column-gap: 1em; -moz = Firefox -webkit = Safari Number of columns will vary based on width of browser window.

6. Multi-column layout -moz-column-count: 3 -moz-column-gap: 1em -moz-column-rule: 1px solid black -webkit-column-count: 3 -webkit-column-gap: 1em -webkit-column-rule: 1px solid black; Number of columns will be 3, gap 1em, with black border

7. Opacity a img { opacity:.5; filter: alpha(opacity=50); } a:hover img { opacity: 1; filter: alpha(opacity=100); } Makes any element partially transparent All descendent tags inherit the property. Used here with the Hover pseudo-class IE Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

8. RGBA.footer { background-color: rgba(70,80,212,.75); } Red, Green, Blue, Alpha Alpha

9. Fonts @font-face { font-family: Lavoisier; src: url('lavoisier.otf'); } h1 { font-family: Lavoisier, Arial, Helvetica, sans-serif; color: #FF993E; font-size: 48px; } open type (.otf) or true type (.ttf) | IE embedded open type (.eot)

10. Pseudo-elements p:before { content: “HELLO World!"; } ul li:first-child:after { content: " | HELLO World!";} ul li:nth-child(odd):after { content: " | HELLO World!";}

11. Template layout module  Can use letters to define a page’s basic structure.  Divides the page into two rows:  top row aaa being one unit  bottom row bcd being three units or columns: body {display: “aaa” “bcd”;} #head {position: a } #nav {position: b } #adv {position: d } #body {position: c } http://a.deveria.com/?p=236 http://code.google.com/p/css-template-layout/ Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.