際際滷

際際滷Share a Scribd company logo

Joel Sklar: Web Design with CSS

Download as PPT, PDF
Bill Dubie
Bill Dubie

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 of 10
Downloaded 62 times
Web Design with CSS NNE-STC April 2009
Agenda Use precise selection techniques Float text boxes and images with exact control Build flexible or fixed columnar layouts without tables Use more efficient, less complicated code to create complex visual designs
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-height: 1.25em;} </style> Remember inheritance!
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
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

More Related Content

Joel Sklar: Web Design with CSS

  • 1. Web Design with CSS NNE-STC April 2009
  • 2. Agenda Use precise selection techniques Float text boxes and images with exact control Build flexible or fixed columnar layouts without tables Use more efficient, less complicated code to create complex visual designs
  • 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;}
  • 9. The Normal Flow h1 p p ul body
  • 10. Positioning h1 div div div body