BloggingWithStyle_2008

2,129 views
2,014 views

Published on

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

No Downloads
Views
Total views
2,129
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
52
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 >

×