Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Style Your Site
A Comprehensive
CSS Design Tutorial




Ben MacNeill
User Interface Designer,
eXtension at NCSU




http:/...
Why Use CSS?



document        document
 content       presentation
Some real reasons

•   Accessibility (Section 508 anyone?)

•   Reduce complexity/repetition in the markup

•   The Cosmet...
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...
Second Session
       The Enhancing

•   CSS-based image sprites & background images

•   Fluid layout

•   Font control

...
Let’s Go to
the Browser
Adding CSS
•   Link
    <link rel=quot;stylesheetquot; type=quot;text/cssquot;
    href=quot;styles.cssquot; media=quot;sc...
Tools & Testing

•   Firebug
    http://getfirebug.com/

•   Web Developer Toolbar
    by Chris Pederick (Firefox)
    htt...
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 examp...
Próxima SlideShare
Cargando en…5
×

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.

  • Sé el primero en comentar

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

×