Your SlideShare is downloading. ×
0
Style
Blogging with



         An Introduction to CSS

Presented by Anthony Piraino at ConvergeSouth 2008
What is CSS and
why should I learn it?
Your Blog: Under the Hood
HTML vs. CSS
HTML
   HyperText Markup Language


Describes the semantics and structure
       of content on a web page.
CSS
         Cascading Style Sheets


   Describes the presentation of content
on a web page by defining design elements
 ...
How do they work together?


     CSS lets you define visual styling by
targeting rules to individual HTML elements.
<html>
         <body>
           <h1>This is a header</h1>
           <p>
              Here is a block of
              ...
body {
        font-family: "trebuchet ms", sans-serif;
        background-color: #ddeedd;
        padding: 20px 100px 0px...
body {
                                   font-family: "trebuchet ms", sans-serif;
<body>                             back...
CSS Syntax

A stylesheet lists rules for presentation.


 Each rule consists of a selector and a
          declaration blo...
selector { property: value; }
The Type Selector


p {
 color: #1662d8;
 background-color: #ffffff;
 padding: 10px;
 border: 5px solid #1bc8fe;
 }
Here is an example paragraph with a
styled font, color, padding and border.




           p {
            color: #1662d8;...
The Class Selector
<p>
   This is a normal paragraph, nothing
   exciting going on here.
</p>
<p class=”alert”>
   But thi...
p {
 color: gray;
 font-size: 12px;
 }


p.alert {
 color: red;
 font-size: 18px;
 font-weight: bold;
 }
This is a normal paragraph, nothing
exciting going on here.


But this is a really important
paragraph - pay attention!
The ID Selector
HTML   <ul id=”contents”>
          <li>Chapter 1</li>
          <li>Chapter 2</li>
          <li>Chapter ...
Descendant Selectors
<p>
   This is a stand-alone paragraph.
</p>
<blockquote>
  <p>
     A paragraph inside our blockquot...
blockquote p {
 color: blue;
 font-weight: bold;
 border-left: 3px solid blue;
 padding-left: 10px;
 }
This is a stand-alone paragraph.

 A paragraph inside our
 blockquote.
 And another blockquoted
 paragraph.
{ The Declaration Block }
Properties and Values



       Value of my House
 Jan   Feb   March   April   May   June
Properties and Values


  selector {
    property: value;
    property: value;
    }
color
By Name


   aqua, black, blue, fuchsia, gray, etc.


        Full list of supported color names:
http://www.w3schools.com...
By Hex Value


Roses are #ff0000
Violets are #0000ff
Red   Green   Blue

#00 00 00
http://www.colorpicker.com/
background-color
margin
padding
border
The Box Model


   element
    padding
     border
    margin
Margin and Padding Values


margin: 0px 20px 10px 20px;

        top   right bottom   left
Pimp my CSS
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#outer-wrapper
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding: 10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding: 10px 40px 10px 40px;
  text-align:$startSide;
  font: $bodyfo...
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding: 10px 40px 10px 40px;
  text-align:$startSide;
  font: $bodyfo...
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#header {
  margin: 5px;
  bor...
#header-wrapper



                  #header



                            #header h1
#header-wrapper



                  #header



                            #header h1
#header-wrapper



                  #header



                            #header h1
#header-wrapper



                  #header



                            #header h1
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#header {
  margin: 5px;
  bor...
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#header {
  margin: 5px;
  bor...
#header-wrapper {
  width:660px;
  margin: 0px 0px 20px 0px;
  border:1px solid $bordercolor;
  }
#header {
  margin: 5px;...
#header-wrapper {
  width:660px;
  margin: 0px 0px 20px 0px;
  border-bottom: 1px solid #c1cccf;
  }
#header {
  margin: 5...
#header-wrapper {
  width:660px;
  margin: 0px 0px 20px 0px;
  border-bottom: 1px solid #c1cccf;
  }
#header {



  color:...
#header-wrapper {
  width:660px;
  margin: 0px 0px 20px 0px;
  border-bottom: 1px solid #c1cccf;
  }
#header {
  color: #0...
#header-wrapper {
  width:660px;
  margin: 0px 0px 20px 0px;
  border-bottom: 1px solid #c1cccf;
  }
#header {
  color: #0...
#header-wrapper {
  width:660px;
  margin: 0px 0px 20px 0px;
  border-bottom: 1px solid #c1cccf;
  }
#header {
  color: #0...
.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }
.sidebar .widget, .main .widget {
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }
.sidebar .widget, .main .widget {
  margin:0px;
  padding:0 0 1.5em;
 }
.sidebar .widget, .main .widget {
  margin:0px;
  padding:0 0 1.5em;
 }


#sidebar-wrapper h2 {
  background-color: #11335...
Resources and Next Steps

              Selectutorial
 http://css.maxdesign.com.au/selectutorial/

      W3Schools CSS Tut...
</slideshow >
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
Upcoming SlideShare
Loading in...5
×

BloggingWithStyle_2008

1,554

Published on

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

No Downloads
Views
Total Views
1,554
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "BloggingWithStyle_2008"

  1. 1. Style Blogging with An Introduction to CSS Presented by Anthony Piraino at ConvergeSouth 2008
  2. 2. What is CSS and why should I learn it?
  3. 3. Your Blog: Under the Hood
  4. 4. HTML vs. CSS
  5. 5. HTML HyperText Markup Language Describes the semantics and structure of content on a web page.
  6. 6. CSS Cascading Style Sheets Describes the presentation of content on a web page by defining design elements such as layout, fonts, and colors.
  7. 7. How do they work together? CSS lets you define visual styling by targeting rules to individual HTML elements.
  8. 8. <html> <body> <h1>This is a header</h1> <p> Here is a block of paragraph text, blah blah blah etc. HTML </p> <h2>Another header</h2> <p> And yet another paragraph with a block of text. </p> </body> </html>
  9. 9. body { font-family: "trebuchet ms", sans-serif; background-color: #ddeedd; padding: 20px 100px 0px 100px; } h1, h2 { font-size: 1.8em; color: #88aa44; margin: 0px; CSS } h2 { font-size: 1.4em; background-color: #ffffff; padding: 0px 30px 0px 30px; } p { background-color: #ffffff; padding: 30px; margin: 0px; }
  10. 10. body { font-family: "trebuchet ms", sans-serif; <body> background-color: #ddeedd; padding: 20px 100px 0px 100px; <h1>This is a header</h1> } <p> h1, h2 { Here is a block of font-size: 1.8em; paragraph text, blah color: #88aa44; blah blah etc. margin: 0px; </p> } h2 { <h2>Another header</h2> font-size: 1.4em; background-color: #ffffff; <p> padding: 0px 30px 0px 30px; And yet another paragraph } with a block of text. </p> p { background-color: #ffffff; </body> padding: 30px; margin: 0px; } HTML CSS
  11. 11. CSS Syntax A stylesheet lists rules for presentation. Each rule consists of a selector and a declaration block.
  12. 12. selector { property: value; }
  13. 13. The Type Selector p { color: #1662d8; background-color: #ffffff; padding: 10px; border: 5px solid #1bc8fe; }
  14. 14. Here is an example paragraph with a styled font, color, padding and border. p { color: #1662d8; background-color: #ffffff; padding: 10px; border: 5px solid #1bc8fe; }
  15. 15. The Class Selector <p> This is a normal paragraph, nothing exciting going on here. </p> <p class=”alert”> But this is a really important paragraph - pay attention! </p>
  16. 16. p { color: gray; font-size: 12px; } p.alert { color: red; font-size: 18px; font-weight: bold; }
  17. 17. This is a normal paragraph, nothing exciting going on here. But this is a really important paragraph - pay attention!
  18. 18. The ID Selector HTML <ul id=”contents”> <li>Chapter 1</li> <li>Chapter 2</li> <li>Chapter 3</li> </ul> CSS #contents { font-weight: bold; font-size: 18px; }
  19. 19. Descendant Selectors <p> This is a stand-alone paragraph. </p> <blockquote> <p> A paragraph inside our blockquote. </p> <p> And another blockquoted paragraph. </p> </blockquote>
  20. 20. blockquote p { color: blue; font-weight: bold; border-left: 3px solid blue; padding-left: 10px; }
  21. 21. This is a stand-alone paragraph. A paragraph inside our blockquote. And another blockquoted paragraph.
  22. 22. { The Declaration Block }
  23. 23. Properties and Values Value of my House Jan Feb March April May June
  24. 24. Properties and Values selector { property: value; property: value; }
  25. 25. color
  26. 26. By Name aqua, black, blue, fuchsia, gray, etc. Full list of supported color names: http://www.w3schools.com/css/css_colornames.asp
  27. 27. By Hex Value Roses are #ff0000 Violets are #0000ff
  28. 28. Red Green Blue #00 00 00
  29. 29. http://www.colorpicker.com/
  30. 30. background-color
  31. 31. margin padding border
  32. 32. The Box Model element padding border margin
  33. 33. Margin and Padding Values margin: 0px 20px 10px 20px; top right bottom left
  34. 34. Pimp my CSS
  35. 35. #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
  36. 36. #outer-wrapper
  37. 37. #outer-wrapper { width: 660px; margin:0 auto; padding: 10px; text-align:$startSide; font: $bodyfont; }
  38. 38. #outer-wrapper { width: 660px; margin:0 auto; padding: 10px 40px 10px 40px; text-align:$startSide; font: $bodyfont; }
  39. 39. #outer-wrapper { width: 660px; margin:0 auto; padding: 10px 40px 10px 40px; text-align:$startSide; font: $bodyfont; background-color: #effcff; border-left: 10px solid #003; border-right: 10px solid #003; }
  40. 40. #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  41. 41. #header-wrapper #header #header h1
  42. 42. #header-wrapper #header #header h1
  43. 43. #header-wrapper #header #header h1
  44. 44. #header-wrapper #header #header h1
  45. 45. #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  46. 46. #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  47. 47. #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border:1px solid $bordercolor; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  48. 48. #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  49. 49. #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  50. 50. #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { color: #000033; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  51. 51. #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { color: #000033; } #header h1 { margin: 0px; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  52. 52. #header-wrapper { width:660px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #c1cccf; } #header { color: #000033; } #header h1 { margin: 0px; padding: 30px 0px 0px 0px; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; }
  53. 53. .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; }
  54. 54. .sidebar .widget, .main .widget { margin:0 0 1.5em; padding:0 0 1.5em; }
  55. 55. .sidebar .widget, .main .widget { margin:0px; padding:0 0 1.5em; }
  56. 56. .sidebar .widget, .main .widget { margin:0px; padding:0 0 1.5em; } #sidebar-wrapper h2 { background-color: #113355; padding: 3px 0px 3px 5px; color: #ffffff; }
  57. 57. Resources and Next Steps Selectutorial http://css.maxdesign.com.au/selectutorial/ W3Schools CSS Tutorial http://www.w3schools.com/css/ CSS Zen Garden http://www.csszengarden.com/
  58. 58. </slideshow >
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×