Mark J Collins October 6 th, 2012

Selectors Element selectors Class selectors ID Selectors Attribute selectors Pseudo-class selectors Combining selectors Unions Planning your web page Using the Box Model Diagramming the layout Creating the HTML structure Effects Rounded corners Gradients Tables Multiple columns Shadows Zebra striping 3D transforms CSS animation Introduction to CSS3

{ ; ; … } p { color:green; font-size:12px; } p {color:green; font-size:12px;}

Introduction to CSS3 New HTML5 Elements article – a stand-alone portion of content such blog entry. aside – content usually put to one side of the page details – used for expandable content figcaption – used with figure to associate a caption with an image figure – used to wrap embedded content such as an image or graphic footer – the page or section footer header – the page or section header hgroup – used to group header elements like h1, h2, etc. nav – used to contain a group of links output – contains output such as the result of a user action section – used to organize content in to logical sections summary – usually used in conjunction with one or more details elements

Introduction to CSS3 Class and ID Selectors.featured { background-color:yellow; } My featured content #intro { color:blue; }

Introduction to CSS3 Attribute Selectors [name="book"] { background-color:yellow; } ~ - (e.g. [name~="book"] ) The attribute value must include the word indicated by the selector value (e.g. name="some book titles"). This is exactly how the class selector works. | - (e.g. [name|="book"] ) The attribute value must begin with a word that matches the selector value (e.g. name="book titles") ^ = (e.g. [name^="book"] ) The attribute value must begin with the selector value (e.g. name="books") $ - (e.g. [name$="book"] ) The attribute value must end with the selector value (e.g. name="checkbook") * - (e.g. [name*="book"] ) The attribute value must contain the selector value (e.g. name="overbooked")

Introduction to CSS3 Pseudo-Class Selectors a: { color: blue; } Examples: :active :checked :disabled :empty :enabled :focus :hover :link :visited :first-child :last-child :nth-child(n) a:visited { color: purple; }

Introduction to CSS3 Combining Selectors, - (e.g. header, p) Selects all p elements as well as all header elements. space – (e.g. header p) Selects the second element when it is inside the first element. The header element does not have to be the immediate parent, just somewhere in node’s parentage. * - (e.g. header*p) selects the second element when it is a grandchild or later descendant of the first element. > - (e.g. header>p) Selects the second element when the first element is the immediate parent. + - (e.g. header+p) Selects the second element when the first element is the preceding sibling. ~ - (e.g. p~header) Selects the second element when it follows the first element (not necessarily immediately).

Introduction to CSS3 Creating Unions header+p,.book, a:visited A union simply combines two or more selectors with a logical OR operation For further reference go to:

Introduction to CSS3 Margin, Padding, and Border margin: 2px; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; margin: 2px 2px 2px 2px;

Introduction to CSS3 Laying Out a Web Page

Introduction to CSS3 Vendor Prefixes header { -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; } PrefixBrowser vendor -moz-Firefox -webkit-Chrome, Safari -o-Opera -ms-Internet Explorer

Introduction to CSS3 Box Shadows h-shadow The position of the horizontal shadow (Can be negative) v-shadow The position of the vertical shadow Blur*The blur distance Spread*The size of shadow Color*The color of the shadow Inset* Changes the shadow from raised to sunken

Introduction to CSS3 Summary Rounded corners Gradients Tables Multiple columns Shadows Zebra striping 3D transforms CSS animation