220 likes | 564 Views
Introduction to CSS3. 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.
E N D
Introduction to CSS3 Mark J Collins October 6th, 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
<selector> {<property:value>; <property:value>; … } 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 <div id="intro" class="featured content" > <p>My featured content</p> </div> .featured { background-color:yellow; } #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="somebooktitles"). 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="booktitles") • ^ = (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 A union simply combines two or more selectors with a logical OR operation header+p, .book, a:visited For further reference go to: http://www.w3schools.com/cssref/css_selectors.asp Introduction to CSS3
Margin, Padding, and Border margin: 2px; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; margin: 2px 2px2px2px; Introduction to CSS3
Laying Out a Web Page Introduction to CSS3
Vendor Prefixes Prefix Browser vendor -moz- Firefox -webkit- Chrome, Safari -o- Opera -ms- Internet Explorer header { -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; } http://peter.sh/experiments/vendor-prefixed-css-property-overview Introduction to CSS3
Box Shadows Introduction to CSS3
Summary • Rounded corners • Gradients • Tables • Multiple columns • Shadows • Zebra striping • 3D transforms • CSS animation Introduction to CSS3