Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Style Your Site Part 2

(Part 2 of 2) Cascading Style Sheets (CSS) control the look and feel of modern web pages while also separating presentation from content. Learn comprehensive CSS techniques in this step-by-step coding demonstration that starts with an un-styled web page and ends up with a finished design. This presentation will also touch on accessibility, semantic markup, visual design and other site-design related issues.

  • Login to see the comments

Style Your Site Part 2

  1. 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. 2. Why Use CSS? document document content presentation
  3. 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. 4. Simple, semantic html markup creates good structure Laying the Ground Work
  5. 5. First Session • Fixed-width layout • Flexible, bulletproof text-based navigation • Light design styling • Print stylesheet (if time)
  6. 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. 7. Let’s Go to the Browser
  8. 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. 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. 10. Tip: Firebug can help with the Box Model
  11. 11. • CSS Selectors Cheat Sheet: www.cameronmoll.com/articles/widget/cheatsheet.pdf
  12. 12. • Better Font Stack: http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/
  13. 13. August 27, 2001 IE6 released 8 http://www.stopie6.org/
  14. 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

×