Your SlideShare is downloading. ×
  • Like
Demystifying CSS & WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Demystifying CSS & WordPress

  • 1,489 views
Published

 

Published in Technology , Design
  • 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,489
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
14
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
  • \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

Transcript

  • 1. Demystifying CSS & WordPress by Justin Carmony
  • 2. About Me• CTO of Dating DNA• CIO of CEVO• Web Development • Hobbyist Since 1997 • Professional Since 2005• http://www.justincarmony.com/blog/
  • 3. Let’s Do A Quick Survey!
  • 4. How Much About CSS Do You Know? None? A Little? A Lot?
  • 5. Lets Start With...My Favorite Topic
  • 6. Why PeopleHate CSS
  • 7. Why Can’t Browsers Just Get Along?
  • 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. Sometimes It Is...User Error
  • 10. Lots of People JustGive Up
  • 11. Don’t Give Up!You can get passed it!
  • 12. The Solution:Better Understanding of CSS
  • 13. First Topic: Selectors
  • 14. selector typesp { 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. Let’s Practice!attendee { mouth:smiling; }.blogger { right-hand:raised; }.developer { left-hand:raised; }speaker { currently: “Laughing as he controls theaudience! Mwuahahaha!”; }
  • 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. Commonly Misunderstood:CSS Specificity
  • 18. Specificity Definition: Selector specificity is a process used to determine which rules take precedence inCSS when several rules could be applied to the same element in markup.
  • 19. Specificity Hierarchy1. 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. 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. 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. Specificity Hierarchy1. 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. Don’t Panic! Tools To Help You: FireBug - FireFoxDeveloper Tools - Chrome
  • 24. AnyQuestionsAbout Specificity?
  • 25. Second Topic:The Box Model
  • 26. Two Basic Display Types:Inline & Block
  • 27. Inline* { display:inline; }
  • 28. Block* { display:block; }
  • 29. The Box Model Pretty Straight Forward
  • 30. HTML:<div class=“hello”>Hello World!</div>CSS:.hello { color:#FF0000;}
  • 31. HTML:<div class=“hello”>Hello World!</div>CSS:.hello { color:#FF0000; font-size:28px;}
  • 32. HTML:<div class=“hello”>Hello World!</div>CSS:.hello { background:#FF0000; font-size:28px;}
  • 33. HTML:<div class=“hello”>Hello World!</div>CSS:.hello { background:#FF0000; font-size:28px; width:200px; height:200px;}
  • 34. HTML:<div class=“hello”>Hello World!</div>CSS:.hello { background:#FF0000; font-size:28px; width:200px; height:200px; padding:20px;}
  • 35. Commonly Misunderstood:Width, Height, & Padding
  • 36. The Box Model
  • 37. HTML:<div class=“hello”>Hello World!</div>CSS:.hello { background:#FF0000; font-size:28px; width:200px; height:200px; padding:20px;}
  • 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. 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. CommonlyMisunderstood:100% Width
  • 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. HTML:<div class=“hello”>Hello World!</div>CSS:.hello { background:#FF0000; font-size:28px; height:200px; padding:20px; border: #000000 solid 5px;}
  • 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. 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. 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. HTML:<div class=“hello”>HelloWorld!</div><div class=“hello”>HelloWorld!</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. Commonly Misunderstood:Margin Collapse
  • 48. Margin Collapse
  • 49. Margin Collapse
  • 50. This is aGood Thing! But...
  • 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. What Actually Happens #masthead { background: #FF8800; margin: 10px; } #masthead h1 { margin: 20px 10px; } #masthead p { margin: 5px 10px; font-style: italic; }
  • 53. Rule of Thumb:Use Padding Instead of Margin Where Possible
  • 54. Use Margins When You Want Them To Collapse
  • 55. AnyQuestionsAbout the Box Model?
  • 56. Third Topic:Floating Elements
  • 57. Normal FlowHTML: 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. Normal FlowCSS:* { 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. Floating Properties1. 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. Floating OneCSS:* { 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. Floating TwoCSS:* { 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. Floating ThreeCSS:* { 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. 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. Clearing the EndCSS:* { 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. Using ClearCSS:* { 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. AnyQuestionsAbout Floating?
  • 67. Other Misconceptions
  • 68. Element Positions
  • 69. Vertical & HorizontalCentering
  • 70. Ok, One More Thing...
  • 71. Using This WithWordPress
  • 72. If You Blog Using...WordPress.com
  • 73. If You Blog Using...Self-Hosted WP
  • 74. Final Thoughts
  • 75. Recommended Book
  • 76. Validate Your CSS!
  • 77. Articles & Resources @ http://justincarmony.com/cssAdditional Info
  • 78. Thank You! Twitter: JustinCarmony IRC: carmony @ #uphpu on freenode Email: justin@justincarmony.com My Blog: http://justincarmony.com/blog/