Style Your Site Part 2

1,272 views

Published on

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

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,272
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×