The document provides a tutorial on using CSS for website styling, outlining reasons to use CSS such as accessibility, reducing markup complexity, and making content more portable. It details topics that will be covered in the tutorial such as fixed and fluid layouts, image sprites, font control, and mobile styling. Resources for CSS tools, testing, and references are also provided.

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

2. Why Use CSS?
document document
content presentation

3. 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

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

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

6. 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

7. Let’s Go to
the Browser

8. Adding CSS
• Link
<link rel=quot;stylesheetquot; type=quot;text/cssquot;
href=quot;styles.cssquot; media=quot;screenquot; />
• Embed
<style media=quot;screenquot; type=quot;text/cssquot;>
add style rules here...
</style>
• Inline
<p style=quot;color:red;quot;>
• Import into CSS
@import quot;styles.cssquot;;

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

10. Tip: Firebug can help
with the Box Model

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

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

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

14. 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