Style Your Site Part 2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Style Your Site Part 2

on

  • 1,767 views

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

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

Statistics

Views

Total Views
1,767
Views on SlideShare
1,752
Embed Views
15

Actions

Likes
2
Downloads
26
Comments
0

2 Embeds 15

http://www.dev.ecocompass.com 12
http://dev.ecocompass.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Style Your Site Part 2 Presentation Transcript

  • 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