The document discusses Cascading Style Sheets (CSS) and how to use CSS to style HTML elements, explaining what CSS can do, the structure of CSS rules with selectors, declarations, and properties, and how to identify the correct selector to change styles using developer tools or viewing the HTML source code. It also addresses common CSS concepts like multiple selectors sharing rules and using specific selectors when needed.

1. You and Your StylesheetVirginia DeBoltBlogHer 09

2. 30 Minute GoalsTalk about what CSS can doTalk about what a style rule looks likeTalk about how to identify the style that matches the part of your page you want to styleAnswer your specific questions

3. What CSS can DoSet color and background color for any elementSet font and font size for any elementSet margins, borders and padding around any elementCreate layouts Create list appearanceCreate link appearanceAnd more!

4. A CSS rule tells the browser how to render the HTMLdiv#content { font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0;}

5. The Selector selects the element to stylediv#content { font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0;}

6. The declaration is inside {}div#content {font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0;}

7. The property is a property of the element you are stylingdiv#content{font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0;}

8. The value sets how you want each property of the selector to lookdiv#content{font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif;font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0;}

9. How can you figure out which selector to change?Out of all the notes on the piano which one do you press? Out of all the selectors and rules in the stylesheet, which one do you change?

10. Figuring out the Selectors with Web Developer Toolbar in Firefox

11. Figuring out the selectors with View Source<div id="container"><div id="content" class="hfeed”><div id="post-2819" class="hentryp1 post publish author-vdebolt category-blogher category-news-politics category-socialmedia category-twitter y2009 m06 d30 h04"> <h2 class="entry-title"><a href="http://www.webteacher.ws/2009/06/30/spreading-the-news/" title="Permalink to Spreading the News" rel="bookmark">Spreading the News</a></h2> <div class="entry-date"><abbr class="published" title="2009-06-30T07:18:37-0400">Tuesday, June 30, 2009</abbr></div> <div class="entry-content"><p>Remember how remarkable it seemed several months ago when a plane sat down in the Hudson River and the first news and photos of the crash came from Twitter? Then the fly ash spill in TVA’s Kingston plant was covered first on Twitter. That was about the time that articles about how the old media just didn’t get digital media started appearing.</p>

12. Sometimes several selectors have the same rulebody.single h2.entry-title, body.page h2.entry-title, body.search h2.entry-title { margin:1em 0 -0.5em;}A comma separated list of selectors—all follow the same rule.

13. Sometimes selectors get really specificdiv.entry-content cite, div.comments ol.commentlist cite { border-bottom:1px dotted #999; cursor:help;}Selects any cite element that is a descendant of an ol element with a class attribute that contains the word commentlist that is a descendant of a div element with a class attribute that contains the word comments.

14. When you are trying to change something, you may need to get really specific too.ol {} not specific enough?Try div.entry-content ol {} instead..small {} not specific enough?Try div#content p.small

15. Let’s talk about your problemsQuestions?

16. ResourcesCSS cascade - a simple step-by-step presentation: http://www.maxdesign.com.au/2009/06/30/css-cascade/Web Teacher Tips: http://www.webteacher.ws/web-teacher-tips-and-tutorials/CSS: The Definitive Guide by Eric A. Meyer, O’Reilly, 2007