Style Your Site Part 1

Style Your SiteA Comprehensive CSS Design Tutorial

Ben MacNeillUser Interface Designer, eXtension at NCSU

http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png

What is CSS?

What is CSS?

document content

document presentation

Why Use CSS?

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

Laying the Ground Work

Simple, semantic html markup

creates good structure

TABLES

ARE FOR DATA

NOT FOR LAYOUT

CSS Syntax

h1 {font-size: 1.5em}

selectors

properties

values

CSS Selectors

div

div#feature

div.comment

div#feature.audio

type selector

ID selector

Class selector

ID + Class

First Session• Fixed-width layout

• Flexible, bulletproof text-based navigation

• Light design styling

• Print stylesheet (if time)

Second Session

• 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

The Enhancing

Let’s Go to the Browser

Important Concepts(Visual formatting model)

The Display Property

Block-level elements:<p>, <ul>, <div>

Every html element has a default display: property

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

• Each style rule (the selector) is assigned a weight

• Most specific selector (greatest weight) wins

div {color: red;}div div {color: blue;} div div div {color: green;}

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

• Classes and IDs carry more weight or specificity

div pdiv.feature pdiv#article pdiv#article.feature p

The Box Model

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

Width != Width

Shorthand

margin: 10px;

margin: 10px 20px 30px 10px;

margin: 10px 20px;

margin: 10px 20px 20px;

top right bottom left

top sides bottom

top/bottom sides

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, 2001IE6 released

8

http://www.stopie6.org/

Thanks!

Ben MacNeillUser Interface Designer, eXtension at NCSUben.macneill@extension.org

Slides and zipped Code examples:http://www.slideshare.net/chillnchttp://drop.io/benmacneill

My CSS bookmarks:http://del.icio.us/chillnc/css