CSS3     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.

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

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

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

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.

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

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.

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

{ 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)

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

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 } Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.