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

1. Web Design with CSS NNE-STC April 2009

3. Web Site Make-over Source: http://www.stopdesign.com/

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. 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. Pseudo-classes Links :link :visited :hover Pseudo-elements :first-letter :first-line p.feature:first-letter {color: 000;}

7. The Box Model

8. The Box Model

9. The Normal Flow h1 p p ul body

10. Positioning h1 div div div body