0
Style Your Site
A Comprehensive
CSS Design Tutorial




Ben MacNeill
User Interface Designer,
eXtension at NCSU




http:/...
What is CSS?
What is CSS?
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
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.co...
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
Important Concepts
 (Visual formatting model)
The Display Property
Every html element has a
default display: property

Block-level elements:
<p>, <ul>, <div>

Inline-le...
The Display Property
Block-level elements are formatted visually
as blocks.


Inline-level elements are formatted visually...
The Cascade
         div {color: red;}
         div div {color: blue;}
         div div div {color: green;}


•   Each sty...
Winning the Cascade


•   Most specific selector wins

•   If two selectors are equal, last one wins

•   inline styles be...
All Elements Are Not
            Equal
          div p
          div.feature p
          div#article p
          div#artic...
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 bo...
Floating

•   Floated elements are taken out of the normal
    document flow and shifted to the left or right
    as far a...
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...
Style Your Site Part 1
Style Your Site Part 1
Upcoming SlideShare
Loading in...5
×

Style Your Site Part 1

1,222

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

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,222
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Style Your Site Part 1"

  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. What is CSS?
  3. 3. What is CSS?
  4. 4. Why Use CSS? document document content presentation
  5. 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. 6. Simple, semantic html markup creates good structure Laying the Ground Work
  7. 7. TABLES ARE FOR DATA NOT FOR LAYOUT
  8. 8. CSS Syntax h1 {font-size: 1.5em} selectors values properties
  9. 9. CSS Selectors type selector div ID selector div#feature Class selector div.comment ID + Class div#feature.audio
  10. 10. First Session • Fixed-width layout • Flexible, bulletproof text-based navigation • Light design styling • Print stylesheet (if time)
  11. 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. 12. Let’s Go to the Browser
  13. 13. Important Concepts (Visual formatting model)
  14. 14. The Display Property Every html element has a default display: property Block-level elements: <p>, <ul>, <div> Inline-level elements: <em>, <span>
  15. 15. The Display Property Block-level elements are formatted visually as blocks. Inline-level elements are formatted visually as lines.
  16. 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. 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. 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. 19. The Box Model http://www.flickr.com/photos/31288116@N02/3065654591/
  20. 20. Width != Width
  21. 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. 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. 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. 24. Tip: Firebug can help with the Box Model
  25. 25. • CSS Selectors Cheat Sheet: www.cameronmoll.com/articles/widget/cheatsheet.pdf
  26. 26. • Better Font Stack: http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/
  27. 27. August 27, 2001 IE6 released 8 http://www.stopie6.org/
  28. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×