style your site part 2
DESCRIPTION
(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.TRANSCRIPT
![Page 1: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/1.jpg)
Style Your SiteA Comprehensive CSS Design Tutorial
Ben MacNeillUser Interface Designer, eXtension at NCSU
http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png
![Page 2: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/2.jpg)
document content
document presentation
Why Use CSS?
![Page 3: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/3.jpg)
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
![Page 4: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/4.jpg)
Laying the Ground Work
Simple, semantic html markup
creates good structure
![Page 5: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/5.jpg)
First Session• Fixed-width layout
• Flexible, bulletproof text-based navigation
• Light design styling
• Print stylesheet (if time)
![Page 6: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/6.jpg)
Second Session
• 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
The Enhancing
![Page 7: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/7.jpg)
Let’s Go to the Browser
![Page 8: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/8.jpg)
Adding CSS• Link
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
• Embed<style media="screen" type="text/css"> add style rules here...</style>
• Inline<p style="color:red;">
• Import into CSS@import "styles.css";
![Page 9: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/9.jpg)
Tools & Testing
• Firebug http://getfirebug.com/
• Web Developer Toolbar by Chris Pederick (Firefox)http://chrispederick.com/work/web-developer/
• Target: Firefox > Safari > IE8 > IE7
![Page 10: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/10.jpg)
Tip: Firebug can help with the Box Model
![Page 11: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/11.jpg)
• CSS Selectors Cheat Sheet: www.cameronmoll.com/articles/widget/cheatsheet.pdf
![Page 12: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/12.jpg)
• Better Font Stack: http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/
![Page 14: Style Your Site Part 2](https://reader034.vdocuments.us/reader034/viewer/2022051412/54b6fe7a4a7959a5348b45ac/html5/thumbnails/14.jpg)
Thanks!
Ben MacNeillUser Interface Designer, eXtension at [email protected]
Slides and zipped Code examples:http://www.slideshare.net/chillnchttp://drop.io/benmacneill
My CSS bookmarks:http://del.icio.us/chillnc/css