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

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

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

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, 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