Introduction to CSS3Mark 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

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

.featured{ background-color:yellow;}

<div id="intro" class="featured content" > <p>My featured content</p></div>

#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

http://www.w3schools.com/cssref/css_selectors.asp

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;}

Prefix Browser vendor-moz- Firefox-webkit- Chrome, Safari-o- Opera-ms- Internet Explorer

http://peter.sh/experiments/vendor-prefixed-css-property-overview

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