Stylin'

Wednesday, November 15, 2006

Note: At the start of class please copy the "css" folder on gambit (gambit/FA05/art346z/class) to your istudents drive

What it is

A style sheet is a set of instructions that controls the appearance of a webpage.


Why We Should Care

1) Greater typography and page layout control
2) Easier to maintain
3) Style info is kept separate from structure
4) Smaller file sizes

Compare the Code


What it Looks Like

A style sheet is made up of rules - a series of instructions for how page elements should be displayed

Each rule is defined by
1) the selector (identifies the element to be affected)
2) the declaration (style instructions which includes a property and value)

So visually it looks like this
selector{property:value}

And a real example would look like this
.header{font-size: 16px}


CSS Fun

Walk-through - before / after


Your Turn

Exercise 1 - Recreate this CSS page using Dreamweaver/CSS.
Exercise 2 - Using only CSS turn this page, into this page.

Christie   /   0 comments