You and Your Stylesheet<br />Virginia DeBolt<br />BlogHer 09<br />
30 Minute Goals<br />Talk about what CSS can do<br />Talk about what a style rule looks like<br />Talk about how to identi...
What CSS can Do<br />Set color and background color for any element<br />Set font and font size for any element<br />Set m...
A CSS rule tells the browser how to render the HTML<br />div#content {<br />	font-family: Frutiger, Univers, &quot;Helveti...
The Selector selects the element to style<br />div#content {<br />	font-family: Frutiger, Univers, &quot;Helvetica Neue&qu...
The declaration is inside {}<br />div#content {<br />font-family: Frutiger, Univers, &quot;Helvetica Neue&quot;, arial, he...
The property is a property of the element you are styling<br />div#content{<br />font-family: Frutiger, Univers, &quot;Hel...
The value sets how you want each property of the selector to look<br />div#content{<br />font-family: Frutiger, Univers, &...
How can you figure out which selector to change?<br />Out of all the notes on the piano which one do you press? <br />Out ...
Figuring out the Selectors with Web Developer Toolbar in Firefox<br />
Figuring out the selectors with View Source<br />&lt;div id=&quot;container&quot;&gt;<br />&lt;div id=&quot;content&quot; ...
Sometimes several selectors have the same rule<br />body.single h2.entry-title, body.page h2.entry-title, body.search h2.e...
Sometimes selectors get really specific<br />div.entry-content cite, div.comments ol.commentlist cite {<br />	border-botto...
When you are trying to change something, you may need to get really specific too.<br />ol {} not specific enough?<br />Try...
Let’s talk about your problems<br />Questions? <br />
Resources<br />CSS cascade - a simple step-by-step presentation: http://www.maxdesign.com.au/2009/06/30/css-cascade/<br />...
Upcoming SlideShare
Loading in …5
×

You and Your Stylesheet

3,554 views

Published on

A brief program on basics of blog CSS for beginners presented at the BlogHer09 Geek Lab.

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

  • Be the first to like this

No Downloads
Views
Total views
3,554
On SlideShare
0
From Embeds
0
Number of Embeds
201
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • This is a rule targeting the content div on a blog page.
  • This is a rule targeting the content div on a blog page.
  • This is a rule targeting the content div on a blog page.
  • This is a rule targeting the content div on a blog page.
  • There are several ways to figure out what selector you need to look for in the stylesheet. One uses the Web Developer Toolbar in Firefox. Other browsers have similar tools to help web developers. Or you can just search through View Source and figure it out.
  • With Web Developer Toolbar
  • Using View Source you can figure out approximately the same information to see which selector may be the one you want to target.
  • You and Your Stylesheet

    1. 1. You and Your Stylesheet<br />Virginia DeBolt<br />BlogHer 09<br />
    2. 2. 30 Minute Goals<br />Talk about what CSS can do<br />Talk about what a style rule looks like<br />Talk about how to identify the style that matches the part of your page you want to style<br />Answer your specific questions<br />
    3. 3. What CSS can Do<br />Set color and background color for any element<br />Set font and font size for any element<br />Set margins, borders and padding around any element<br />Create layouts <br />Create list appearance<br />Create link appearance<br />And more!<br />
    4. 4. A CSS rule tells the browser how to render the HTML<br />div#content {<br /> font-family: Frutiger, Univers, &quot;Helvetica Neue&quot;, arial, helvetica, sans-serif;<br /> font-size: 1em;<br /> line-height: 1.4;<br /> background:#fff;<br /> color:#000;<br /> margin:0 1em;<br /> padding:0 1em 0 0;<br />}<br />
    5. 5. The Selector selects the element to style<br />div#content {<br /> font-family: Frutiger, Univers, &quot;Helvetica Neue&quot;, arial, helvetica, sans-serif;<br /> font-size: 1em;<br /> line-height: 1.4;<br /> background:#fff;<br /> color:#000;<br /> margin:0 1em;<br /> padding:0 1em 0 0;<br />}<br />
    6. 6. The declaration is inside {}<br />div#content {<br />font-family: Frutiger, Univers, &quot;Helvetica Neue&quot;, arial, helvetica, sans-serif;<br /> font-size: 1em;<br /> line-height: 1.4;<br /> background:#fff;<br /> color:#000;<br /> margin:0 1em;<br /> padding:0 1em 0 0;<br />}<br />
    7. 7. The property is a property of the element you are styling<br />div#content{<br />font-family: Frutiger, Univers, &quot;Helvetica Neue&quot;, arial, helvetica, sans-serif;<br /> font-size: 1em;<br /> line-height: 1.4;<br /> background:#fff;<br /> color:#000;<br /> margin:0 1em;<br /> padding:0 1em 0 0;<br />}<br />
    8. 8. The value sets how you want each property of the selector to look<br />div#content{<br />font-family: Frutiger, Univers, &quot;Helvetica Neue&quot;, arial, helvetica, sans-serif;<br />font-size: 1em;<br /> line-height: 1.4;<br /> background:#fff;<br /> color:#000;<br /> margin:0 1em;<br /> padding:0 1em 0 0;<br />}<br />
    9. 9. How can you figure out which selector to change?<br />Out of all the notes on the piano which one do you press? <br />Out of all the selectors and rules in the stylesheet, which one do you change?<br />
    10. 10. Figuring out the Selectors with Web Developer Toolbar in Firefox<br />
    11. 11. Figuring out the selectors with View Source<br />&lt;div id=&quot;container&quot;&gt;<br />&lt;div id=&quot;content&quot; class=&quot;hfeed”&gt;<br />&lt;div id=&quot;post-2819&quot; class=&quot;hentryp1 post publish author-vdebolt category-blogher category-news-politics category-socialmedia category-twitter y2009 m06 d30 h04&quot;&gt;<br /> &lt;h2 class=&quot;entry-title&quot;&gt;&lt;a href=&quot;http://www.webteacher.ws/2009/06/30/spreading-the-news/&quot; title=&quot;Permalink to Spreading the News&quot; rel=&quot;bookmark&quot;&gt;Spreading the News&lt;/a&gt;&lt;/h2&gt;<br /> &lt;div class=&quot;entry-date&quot;&gt;&lt;abbr class=&quot;published&quot; title=&quot;2009-06-30T07:18:37-0400&quot;&gt;Tuesday, June 30, 2009&lt;/abbr&gt;&lt;/div&gt;<br /> &lt;div class=&quot;entry-content&quot;&gt;<br />&lt;p&gt;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.&lt;/p&gt;<br />
    12. 12. Sometimes several selectors have the same rule<br />body.single h2.entry-title, body.page h2.entry-title, body.search h2.entry-title {<br /> margin:1em 0 -0.5em;<br />}<br />A comma separated list of selectors—all follow the same rule.<br />
    13. 13. Sometimes selectors get really specific<br />div.entry-content cite, div.comments ol.commentlist cite {<br /> border-bottom:1px dotted #999;<br /> cursor:help;<br />}<br />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.<br />
    14. 14. When you are trying to change something, you may need to get really specific too.<br />ol {} not specific enough?<br />Try div.entry-content ol {} instead.<br />.small {} not specific enough?<br />Try div#content p.small<br />
    15. 15. Let’s talk about your problems<br />Questions? <br />
    16. 16. Resources<br />CSS cascade - a simple step-by-step presentation: http://www.maxdesign.com.au/2009/06/30/css-cascade/<br />Web Teacher Tips: http://www.webteacher.ws/web-teacher-tips-and-tutorials/<br />CSS: The Definitive Guide by Eric A. Meyer, O’Reilly, 2007<br />

    ×