1 / 14

Introduction to CSS3

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.

diem
Download Presentation

Introduction to CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to CSS3 Mark J Collins October 6th, 2012

  2. 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

  3. <selector> {<property:value>; <property:value>; … } p {color:green; font-size:12px;} p { color:green; font-size:12px; } Introduction to CSS3

  4. 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

  5. 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

  6. 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

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

  8. 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

  9. 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

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

  11. Laying Out a Web Page Introduction to CSS3

  12. 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

  13. Box Shadows Introduction to CSS3

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

More Related