BloggingWithStyle_2008
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,806
On Slideshare
1,806
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Style Blogging with An Introduction to CSS Presented by Anthony Piraino at ConvergeSouth 2008
  • 2. What is CSS and why should I learn it?
  • 3. Your Blog: Under the Hood
  • 4. HTML vs. CSS
  • 5. HTML HyperText Markup Language Describes the semantics and structure of content on a web page.
  • 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. How do they work together? CSS lets you define visual styling by targeting rules to individual HTML elements.
  • 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. 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. 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. CSS Syntax A stylesheet lists rules for presentation. Each rule consists of a selector and a declaration block.
  • 12. selector { property: value; }
  • 13. The Type Selector p { color: #1662d8; background-color: #ffffff; padding: 10px; border: 5px solid #1bc8fe; }
  • 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. 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. p { color: gray; font-size: 12px; } p.alert { color: red; font-size: 18px; font-weight: bold; }
  • 17. This is a normal paragraph, nothing exciting going on here. But this is a really important paragraph - pay attention!
  • 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. 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. blockquote p { color: blue; font-weight: bold; border-left: 3px solid blue; padding-left: 10px; }
  • 21. This is a stand-alone paragraph. A paragraph inside our blockquote. And another blockquoted paragraph.
  • 22. { The Declaration Block }
  • 23. Properties and Values Value of my House Jan Feb March April May June
  • 24. Properties and Values selector { property: value; property: value; }
  • 25. color
  • 26. By Name aqua, black, blue, fuchsia, gray, etc. Full list of supported color names: http://www.w3schools.com/css/css_colornames.asp
  • 27. By Hex Value Roses are #ff0000 Violets are #0000ff
  • 28. Red Green Blue #00 00 00
  • 29. http://www.colorpicker.com/
  • 30. background-color
  • 31. margin padding border
  • 32. The Box Model element padding border margin
  • 33. Margin and Padding Values margin: 0px 20px 10px 20px; top right bottom left
  • 34. Pimp my CSS
  • 35. #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
  • 36. #outer-wrapper
  • 37. #outer-wrapper { width: 660px; margin:0 auto; padding: 10px; text-align:$startSide; font: $bodyfont; }
  • 38. #outer-wrapper { width: 660px; margin:0 auto; padding: 10px 40px 10px 40px; text-align:$startSide; font: $bodyfont; }
  • 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. #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. #header-wrapper #header #header h1
  • 42. #header-wrapper #header #header h1
  • 43. #header-wrapper #header #header h1
  • 44. #header-wrapper #header #header h1
  • 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. #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. #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. #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. #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. #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. #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. #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. .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; }
  • 54. .sidebar .widget, .main .widget { margin:0 0 1.5em; padding:0 0 1.5em; }
  • 55. .sidebar .widget, .main .widget { margin:0px; padding:0 0 1.5em; }
  • 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. 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. </slideshow >