SlideShare a Scribd company logo

Style Your Site Part 1

•
•
Ben MacNeill
Ben MacNeill

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

Related slideshows

Back to the Basics - 2 - HTML & CSS
Back to the Basics - 2 - HTML & CSSBack to the Basics - 2 - HTML & CSS
Back to the Basics - 2 - HTML & CSS
 
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScriptDYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
1 of 30
Download to read offline
Style Your Site A Comprehensive CSS Design Tutorial Ben MacNeill User Interface Designer, eXtension at NCSU http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png
What is CSS?
Style Your Site Part 1
Style Your Site Part 1
What is CSS?
Why Use CSS? document document content presentation
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
Simple, semantic html markup creates good structure Laying the Ground Work
TABLES ARE FOR DATA NOT FOR LAYOUT
CSS Syntax h1 {font-size: 1.5em} selectors values properties
CSS Selectors type selector div ID selector div#feature Class selector div.comment ID + Class div#feature.audio
First Session • Fixed-width layout • Flexible, bulletproof text-based navigation • Light design styling • Print stylesheet (if time)
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
Let’s Go to the Browser
Important Concepts (Visual formatting model)
The Display Property Every html element has a default display: property Block-level elements: <p>, <ul>, <div> Inline-level elements: <em>, <span>
The Display Property Block-level elements are formatted visually as blocks. Inline-level elements are formatted visually as lines.
The Cascade div {color: red;} div div {color: blue;} div div div {color: green;} • Each style rule (the selector) is assigned a weight • Most specific selector (greatest weight) wins
Winning the Cascade • Most specific selector wins • If two selectors are equal, last one wins • inline styles beat style sheets • !important beats everything
All Elements Are Not Equal div p div.feature p div#article p div#article.feature p • Classes and IDs carry more weight or specificity
The Box Model http://www.flickr.com/photos/31288116@N02/3065654591/
Width != Width
Shorthand margin: 10px 20px 30px 10px; top right bottom left margin: 10px 20px 20px; top sides bottom margin: 10px 20px; top/bottom sides margin: 10px; all
Floating • Floated elements are taken out of the normal document flow and shifted to the left or right as far as it can go • elements following floated elements shift up and wrap unless cleared with the clear: property
Tools & Testing • Firebug http://getfirebug.com/ • Web Developer Toolbar by Chris Pederick (Firefox) http://chrispederick.com/work/web-developer/ • Target: Firefox > Safari > IE8 > IE7
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 examples: http://www.slideshare.net/chillnc http://drop.io/benmacneill My CSS bookmarks: http://del.icio.us/chillnc/css

More Related Content

Style Your Site Part 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
  • 6. Why Use CSS? document document content presentation
  • 7. 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
  • 8. Simple, semantic html markup creates good structure Laying the Ground Work
  • 9. TABLES ARE FOR DATA NOT FOR LAYOUT
  • 10. CSS Syntax h1 {font-size: 1.5em} selectors values properties
  • 11. CSS Selectors type selector div ID selector div#feature Class selector div.comment ID + Class div#feature.audio
  • 12. First Session • Fixed-width layout • Flexible, bulletproof text-based navigation • Light design styling • Print stylesheet (if time)
  • 13. 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
  • 14. Let’s Go to the Browser
  • 15. Important Concepts (Visual formatting model)
  • 16. The Display Property Every html element has a default display: property Block-level elements: <p>, <ul>, <div> Inline-level elements: <em>, <span>
  • 17. The Display Property Block-level elements are formatted visually as blocks. Inline-level elements are formatted visually as lines.
  • 18. The Cascade div {color: red;} div div {color: blue;} div div div {color: green;} • Each style rule (the selector) is assigned a weight • Most specific selector (greatest weight) wins
  • 19. Winning the Cascade • Most specific selector wins • If two selectors are equal, last one wins • inline styles beat style sheets • !important beats everything
  • 20. All Elements Are Not Equal div p div.feature p div#article p div#article.feature p • Classes and IDs carry more weight or specificity
  • 21. The Box Model http://www.flickr.com/photos/31288116@N02/3065654591/
  • 23. Shorthand margin: 10px 20px 30px 10px; top right bottom left margin: 10px 20px 20px; top sides bottom margin: 10px 20px; top/bottom sides margin: 10px; all
  • 24. Floating • Floated elements are taken out of the normal document flow and shifted to the left or right as far as it can go • elements following floated elements shift up and wrap unless cleared with the clear: property
  • 25. Tools & Testing • Firebug http://getfirebug.com/ • Web Developer Toolbar by Chris Pederick (Firefox) http://chrispederick.com/work/web-developer/ • Target: Firefox > Safari > IE8 > IE7
  • 26. Tip: Firebug can help with the Box Model
  • 27. • CSS Selectors Cheat Sheet: www.cameronmoll.com/articles/widget/cheatsheet.pdf
  • 28. • Better Font Stack: http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/
  • 29. August 27, 2001 IE6 released 8 http://www.stopie6.org/
  • 30. 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