Style Your SiteA Comprehensive CSS Design Tutorial

Ben MacNeillUser Interface Designer, eXtension at NCSU

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

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

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

Adding CSS• Link

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

• Embed<style media="screen" type="text/css"> add style rules here...</style>

• Inline<p style="color:red;">

• Import into CSS@import "styles.css";

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