Style Your Site Part 1

  • 1,160 views
Uploaded on

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

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

More in: Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,160
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
54
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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. What is CSS?
  • 3. What is CSS?
  • 4. Why Use CSS? document document content presentation
  • 5. 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
  • 6. Simple, semantic html markup creates good structure Laying the Ground Work
  • 7. TABLES ARE FOR DATA NOT FOR LAYOUT
  • 8. CSS Syntax h1 {font-size: 1.5em} selectors values properties
  • 9. CSS Selectors type selector div ID selector div#feature Class selector div.comment ID + Class div#feature.audio
  • 10. First Session • Fixed-width layout • Flexible, bulletproof text-based navigation • Light design styling • Print stylesheet (if time)
  • 11. 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
  • 12. Let’s Go to the Browser
  • 13. Important Concepts (Visual formatting model)
  • 14. The Display Property Every html element has a default display: property Block-level elements: <p>, <ul>, <div> Inline-level elements: <em>, <span>
  • 15. The Display Property Block-level elements are formatted visually as blocks. Inline-level elements are formatted visually as lines.
  • 16. 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
  • 17. Winning the Cascade • Most specific selector wins • If two selectors are equal, last one wins • inline styles beat style sheets • !important beats everything
  • 18. 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
  • 19. The Box Model http://www.flickr.com/photos/31288116@N02/3065654591/
  • 20. Width != Width
  • 21. 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
  • 22. 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
  • 23. Tools & Testing • Firebug http://getfirebug.com/ • Web Developer Toolbar by Chris Pederick (Firefox) http://chrispederick.com/work/web-developer/ • Target: Firefox > Safari > IE8 > IE7
  • 24. Tip: Firebug can help with the Box Model
  • 25. • CSS Selectors Cheat Sheet: www.cameronmoll.com/articles/widget/cheatsheet.pdf
  • 26. • Better Font Stack: http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/
  • 27. August 27, 2001 IE6 released 8 http://www.stopie6.org/
  • 28. 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