Successfully reported this slideshow.
Your SlideShare is downloading. ×

Demystifying CSS & WordPress

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 80 Ad

More Related Content

Similar to Demystifying CSS & WordPress (20)

Recently uploaded (20)

Advertisement

Demystifying CSS & WordPress

  1. 1. Demystifying CSS & WordPress by Justin Carmony
  2. 2. About Me • CTO of Dating DNA • CIO of CEVO • Web Development • Hobbyist Since 1997 • Professional Since 2005 • http://www.justincarmony.com/blog/
  3. 3. Let’s Do A Quick Survey!
  4. 4. How Much About CSS Do You Know? None? A Little? A Lot?
  5. 5. Lets Start With... My Favorite Topic
  6. 6. Why People Hate CSS
  7. 7. Why Can’t Browsers Just Get Along?
  8. 8. h1 a, h2 a, html, body, div, span, applet, object, iframe, h3 a, h4 a, h1, h2, h3, h4, h5, h6, p, blockquote, pre, h5 a, a, abbr, acronym, address, big, cite, code, h6 a, h1 a:visited, del, dfn, em, font, img, ins, kbd, q, s, samp, h2 a:visited, small, strike, strong, sub, sup, tt, var, h3 a:visited, h4 a:visited, b, u, i, center, h5 a:visited, h6 a:visited { dl, dt, dd, ol, ul, li, color: #51555c; fieldset, form, label, legend, } h1 a:hover, hr{ h2 a:hover, margin: 0; h3 a:hover, h4 a:hover, padding: 0; h5 a:hover, border: 0; h6 a:hover { color: #a00004; outline: 0; text-decoration: none; } font-size: 100%; /* elements with title attribute */ vertical-align: baseline; abbr[title], acronym[title], background: transparent; dfn[title], } span[title], del[title] { blockquote, q { cursor: help; quotes: none; } /* typogrify: inset initial double quotes. */ } .dquo { margin-left: -.45em; blockquote:before, blockquote:after, } q:before, q:after { /* fancy ampersands */ .amp { content: ''; font-family: Baskerville, "Goudy Old Style", "Palatino", "Boo content: none; Antiqua", serif; font-size: 13px; } font-style: italic; :focus { } /* Font sizes and vertical measure */ outline: 0; h1, h2, } h3, What the Heck Is This? cite, h4, h5, address { h6, display:inline; .h1, .h2, font-style:normal; .h3 { } display:block; margin-bottom:9px; }
  9. 9. Sometimes It Is... User Error
  10. 10. Lots of People Just Give Up
  11. 11. Don’t Give Up! You can get passed it!
  12. 12. The Solution: Better Understanding of CSS
  13. 13. First Topic: Selectors
  14. 14. selector types p { margin:10px 0 10px 0; } /* Element */ .header { width:1000px; } /* Class */ #footer { padding:10px; } /* ID */ a:visited { color:#0016ff; } /* Pseudo Class */ h1:before { margin-bottom:0px; } /* Pseudo Element */
  15. 15. Let’s Practice! attendee { mouth:smiling; } .blogger { right-hand:raised; } .developer { left-hand:raised; } speaker { currently: “Laughing as he controls the audience! Mwuahahaha!”; }
  16. 16. Which Rule to Rule Them All? * { color:black; } a { color:blue; } #content a { color:red; } html body article .entry-post a { color: green; }
  17. 17. Commonly Misunderstood: CSS Specificity
  18. 18. Specificity Definition: Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup.
  19. 19. Specificity Hierarchy 1. Inline styles (i.e. <div style=“font-weight:bold;”>) 2. ID Selectors (i.e. #header, #footer ) 3. Class Selectors (i.e. .blogger, .selected ) 4. Element Selectors (i.e. blockquote, div )
  20. 20. Calculating Specificity Start With Value: 0,0,0,0 Element Selector Class Selector Value: 0,0,0,1 Value: 0,0,1,0 Example: div Example: .vador ID Selector Value: 0,1,0,0 Example: #header
  21. 21. Calculating Specificity Which is Greater? 0,0,0,1 > 0,0,0,0 0,0,0,2 > 0,0,0,1 0,0,1,0 > 0,0,0,15 0,2,0,0 > 0,1,99,99
  22. 22. Specificity Hierarchy 1. Equal Specificity - Use Last Rule html p { color:red; } div p { color: blue; } /* Will Use This One */ 2. Unequal Specificity - Use More Specific Rule #content h1 { font-size: 30px; } /* Will Use */ body h1 { font-size:20px; }
  23. 23. Don’t Panic! Tools To Help You: FireBug - FireFox Developer Tools - Chrome
  24. 24. Any Questions About Specificity?
  25. 25. Second Topic: The Box Model
  26. 26. Two Basic Display Types: Inline & Block
  27. 27. Inline * { display:inline; }
  28. 28. Block * { display:block; }
  29. 29. The Box Model Pretty Straight Forward
  30. 30. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { color:#FF0000; }
  31. 31. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { color:#FF0000; font-size:28px; }
  32. 32. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; }
  33. 33. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; width:200px; height:200px; }
  34. 34. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; width:200px; height:200px; padding:20px; }
  35. 35. Commonly Misunderstood: Width, Height, & Padding
  36. 36. The Box Model
  37. 37. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; width:200px; height:200px; padding:20px; }
  38. 38. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; width:200px; height:200px; padding:20px; border: #000000 solid 5px; }
  39. 39. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; width:100%; height:200px; padding:20px; border: #000000 solid 5px; }
  40. 40. Commonly Misunderstood: 100% Width
  41. 41. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; width:100%; height:200px; padding:20px; border: #000000 solid 5px; }
  42. 42. HTML: <div class=“hello”> Hello World! </div> CSS: .hello { background:#FF0000; font-size:28px; height:200px; padding:20px; border: #000000 solid 5px; }
  43. 43. HTML: <div class=“hello”> Hello World! </div> CSS: * { margin: 0; padding: 0; } .hello { background:#FF0000; font-size:28px; height:200px; padding:20px; border: #0000FF solid 5px; }
  44. 44. HTML: <div class=“hello”> Hello World! </div> CSS: * { margin: 0; padding: 0; } .hello { background:#FF0000; font-size:28px; height:200px; padding:20px; border: #0000FF solid 5px; margin: 20px 10px 20px 10px; }
  45. 45. HTML: <div class=“hello”> Hello World! </div> CSS: * { margin: 0; padding: 0; } .hello { background:#FF0000; font-size:28px; height:100px; padding:20px; border: #0000FF solid 5px; margin: 20px 10px 20px 10px; }
  46. 46. HTML: <div class=“hello”>Hello World!</div> <div class=“hello”>Hello World!</div> CSS: * { margin: 0; padding: 0; } .hello { background:#FF0000; font-size:28px; height:100px; padding:20px; border: #0000FF solid 5px; margin: 20px 10px 20px 10px; }
  47. 47. Commonly Misunderstood: Margin Collapse
  48. 48. Margin Collapse
  49. 49. Margin Collapse
  50. 50. This is a Good Thing! But...
  51. 51. What You Think Should Happen #masthead { background: #FF8800; margin: 10px; } #masthead h1 { margin: 20px 10px; } #masthead p { margin: 5px 10px; font-style: italic; }
  52. 52. What Actually Happens #masthead { background: #FF8800; margin: 10px; } #masthead h1 { margin: 20px 10px; } #masthead p { margin: 5px 10px; font-style: italic; }
  53. 53. Rule of Thumb: Use Padding Instead of Margin Where Possible
  54. 54. Use Margins When You Want Them To Collapse
  55. 55. Any Questions About the Box Model?
  56. 56. Third Topic: Floating Elements
  57. 57. Normal Flow HTML: CSS: <div class="container"> * { margin:0; padding:0; } <div class="box one"></div> body { margin:20px; } <div class="box two"></div> .container { padding:20px; <div class="box three"></div> background:#7acfff; } </div> .box { width:100px; height:100px; } .one { background:red; } .two { background:green; } .three { background:blue; }
  58. 58. Normal Flow CSS: * { margin:0; padding:0; } body { margin:20px; } .container { padding:20px; background:#7acfff; } .box { width:100px; height:100px; } .one { background:red; } .two { background:green; } .three { background:blue; }
  59. 59. Floating Properties 1. The “float” attribute can have values of “right, left, inherit, and none.” 2. The block element will shift to the left or right of the content. 3. The parent element’s content will flow around the element (unless they use the “clear” attribute). 4. The floated element is removed from the Normal Flow.
  60. 60. Floating One CSS: * { margin:0; padding:0; } body { margin:20px; } .container { padding:20px; background:#7acfff; } .box { width:100px; height:100px; } .one { background:red; float:right; } .two { background:green; } .three { background:blue; }
  61. 61. Floating Two CSS: * { margin:0; padding:0; } body { margin:20px; } .container { padding:20px; background:#7acfff; } .box { width:100px; height:100px; } .one { background:red; float:right; } .two { background:green; } .three { background:blue; float:right; }
  62. 62. Floating Three CSS: * { margin:0; padding:0; } body { margin:20px; } .container { padding:20px; background:#7acfff; } .box { width:100px; height:100px; } .one { background:red; float:right; } .two { background:green; float:left; } .three { background:blue; float:right; }
  63. 63. Normal Flow HTML: <div class="container"> <div class="box one"></div> <div class="box two"></div> <div class="box three"></div> <div class="clear"></div> </div>
  64. 64. Clearing the End CSS: * { margin:0; padding:0; } body { margin:20px; } .container { padding:20px; background:#7acfff; } .box { width:100px; height:100px; } .one { background:red; float:right; } .two { background:green; float:left; } .three { background:blue; float:right; } .clear { clear:both; }
  65. 65. Using Clear CSS: * { margin:0; padding:0; } body { margin:20px; } .container { padding:20px; background:#7acfff; } .box { width:100px; height:100px; } .one { background:red; float:right; } .two { background:green; float:left; } .three { background:blue; float:right; clear:right; } .clear { clear:both; }
  66. 66. Any Questions About Floating?
  67. 67. Other Misconceptions
  68. 68. Element Positions
  69. 69. Vertical & Horizontal Centering
  70. 70. Ok, One More Thing...
  71. 71. Using This With WordPress
  72. 72. If You Blog Using... WordPress.com
  73. 73. If You Blog Using... Self-Hosted WP
  74. 74. Final Thoughts
  75. 75. Recommended Book
  76. 76. Validate Your CSS!
  77. 77. Articles & Resources @ http://justincarmony.com/css Additional Info
  78. 78. Thank You! Twitter: JustinCarmony IRC: carmony @ #uphpu on freenode Email: justin@justincarmony.com My Blog: http://justincarmony.com/blog/

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×