Style Your Site
A Comprehensive
CSS Design Tutorial
Ben MacNeill
User Interface Designer,
eXtension at NCSU
http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png

What is CSS?

What is CSS?

Why Use CSS?
document document
content presentation

Some real reasons
• Accessibility (Section 508 anyone?)
• Reduce complexity/repetition in the markup
• The Cosmetic stuff is all in one place. Global
design changes are easy.
• Your content is more portable for mobile
devices, feed readers, printing
• It's not 1999

Simple, semantic
html markup
creates good structure
Laying the Ground Work

TABLES
ARE FOR DATA
NOT FOR LAYOUT

CSS Syntax
h1 {font-size: 1.5em}
selectors values
properties

CSS Selectors
type selector
div
ID selector
div#feature
Class selector
div.comment
ID + Class
div#feature.audio

First Session
• Fixed-width layout
• Flexible, bulletproof text-based navigation
• Light design styling
• Print stylesheet (if time)

Second Session
The Enhancing
• CSS-based image sprites & background images
• Fluid layout
• Font control
• CSS reset stylesheet
• Convert form to semantic markup and style it
• Mobile stylesheet for the iPhone

Let’s Go to
the Browser

Important Concepts
(Visual formatting model)

The Display Property
Every html element has a
default display: property
Block-level elements:
<p>, <ul>, <div>
Inline-level elements:
<em>, <span>

The Display Property
Block-level elements are formatted visually
as blocks.
Inline-level elements are formatted visually
as lines.

The Cascade
div {color: red;}
div div {color: blue;}
div div div {color: green;}
• Each style rule (the selector) is assigned a
weight
• Most specific selector (greatest weight) wins

Winning the Cascade
• Most specific selector wins
• If two selectors are equal, last one wins
• inline styles beat style sheets
• !important beats everything

All Elements Are Not
Equal
div p
div.feature p
div#article p
div#article.feature p
• Classes and IDs carry more weight or
specificity

The
Box
Model
http://www.flickr.com/photos/31288116@N02/3065654591/

Width != Width

Shorthand
margin: 10px 20px 30px 10px;
top right bottom left
margin: 10px 20px 20px;
top sides bottom
margin: 10px 20px;
top/bottom sides
margin: 10px;
all

Floating
• Floated elements are taken out of the normal
document flow and shifted to the left or right
as far as it can go
• elements following floated elements shift up
and wrap unless cleared with the clear:
property

Tools & Testing
• Firebug
http://getfirebug.com/
• Web Developer Toolbar
by Chris Pederick (Firefox)
http://chrispederick.com/work/web-developer/
• Target: Firefox > Safari > IE8 > IE7

Tip: Firebug can help
with the Box Model

• CSS Selectors Cheat Sheet:
www.cameronmoll.com/articles/widget/cheatsheet.pdf

• Better Font Stack:
http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/

August 27, 2001
IE6 released
8
http://www.stopie6.org/

Thanks!
Ben MacNeill
User Interface Designer, eXtension at NCSU
ben.macneill@extension.org
Slides and zipped Code examples:
http://www.slideshare.net/chillnc
http://drop.io/benmacneill
My CSS bookmarks:
http://del.icio.us/chillnc/css