Web Design with CSS NNE-STC  April 2009
Agenda <ul><li>Use precise selection techniques  </li></ul><ul><li>Float text boxes and images with exact control </li></u...
Web Site Make-over Source: http://www.stopdesign.com/
Basic Syntax <style type=“text/css”> body {color: 000;} p {font-family: arial, helvetica,  sans-serif; color: ccc; line-he...
Adding Specificity <div id=“main”><p> … </p></div> Descendant div#main p {color: 000;} <div id=“main”> Restricting ID div#...
Pseudo-classes Links :link :visited :hover Pseudo-elements :first-letter :first-line p.feature:first-letter {color: 000;}
The Box Model
The Box Model
The Normal Flow h1 p p ul body
Positioning h1 div div div body
Upcoming SlideShare
Loading in …5
×

Joel Sklar: Web Design with CSS

3,041 views

Published on

Web designer and author Joel Sklar's presentation: Web Design with CSS, conducted at the April 2009 meeting of the Northern New England chapter of The Society for Technical Communication

Published in: Technology, Education
1 Comment
3 Likes
Statistics
Notes
  • Hi Bill D
    I am participating in a contest and your slide I liked very much,because in my company we work with web design and SEO, so I invited, to visit my slide and if it likes, please addme to your favorites, thank you very much

    Check out this SlideShare

    http://slidesha.re/5Td1I5

    Please Addme to your favorite ’♥’ bye bye
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,041
On SlideShare
0
From Embeds
0
Number of Embeds
465
Actions
Shares
0
Downloads
57
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • Joel Sklar: Web Design with CSS

    1. 1. Web Design with CSS NNE-STC April 2009
    2. 2. Agenda <ul><li>Use precise selection techniques </li></ul><ul><li>Float text boxes and images with exact control </li></ul><ul><li>Build flexible or fixed columnar layouts without tables </li></ul><ul><li>Use more efficient, less complicated code to create complex visual designs </li></ul>
    3. 3. Web Site Make-over Source: http://www.stopdesign.com/
    4. 4. Basic Syntax <style type=“text/css”> body {color: 000;} p {font-family: arial, helvetica, sans-serif; color: ccc; line-height: 1.25em;} </style> Remember inheritance!
    5. 5. Adding Specificity <div id=“main”><p> … </p></div> Descendant div#main p {color: 000;} <div id=“main”> Restricting ID div#main {color: 000;} <p id=“main”> ID #main {color: 000;} <p class=“copy”> Restricting class p.copy {color: 000;} <div class=“copy”> Class .copy {color: 000;} <h1> and <h2> Multiple selectors h1, h2 {color: 000;} Selected Element CSS Selector
    6. 6. Pseudo-classes Links :link :visited :hover Pseudo-elements :first-letter :first-line p.feature:first-letter {color: 000;}
    7. 7. The Box Model
    8. 8. The Box Model
    9. 9. The Normal Flow h1 p p ul body
    10. 10. Positioning h1 div div div body

    ×