Demystifying CSS &   WordPress          by Justin Carmony
About Me• CTO of Dating DNA• CIO of CEVO• Web Development • Hobbyist Since 1997 • Professional Since 2005• http://www.just...
Let’s Do A Quick      Survey!
How Much About CSS Do You Know?     None? A Little?        A Lot?
Lets Start With...My Favorite Topic
Why PeopleHate CSS
Why Can’t Browsers Just Get Along?
h1 a,                                                 h2 a,html, body, div, span, applet, object, iframe,   h3 a,         ...
Sometimes It Is...User Error
Lots of People JustGive Up
Don’t Give Up!You can get passed it!
The Solution:Better Understanding     of CSS
First Topic: Selectors
selector typesp { margin:10px 0 10px 0; } /* Element */.header { width:1000px; } /* Class */#footer { padding:10px; } /* I...
Let’s Practice!attendee { mouth:smiling; }.blogger { right-hand:raised; }.developer { left-hand:raised; }speaker { current...
Which Rule to Rule Them All? * { color:black; } a { color:blue; } #content a { color:red; } html body article .entry-post ...
Commonly Misunderstood:CSS Specificity
Specificity Definition:  Selector specificity is a process used to determine which rules take precedence inCSS when several ...
Specificity Hierarchy1. Inline styles       (i.e. <div style=“font-weight:bold;”>)2. ID Selectors       (i.e. #header, #foo...
Calculating Specificity            Start With Value: 0,0,0,0     Element Selector               Class Selector     Value: 0...
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...
Specificity Hierarchy1. Equal Specificity - Use Last Rule     html p { color:red; }     div p { color: blue; } /* Will Use T...
Don’t Panic! Tools To Help You:    FireBug - FireFoxDeveloper Tools - Chrome
AnyQuestionsAbout Specificity?
Second Topic:The Box Model
Two Basic Display Types:Inline & Block
Inline* { display:inline; }
Block* { display:block; }
The Box Model                Pretty Straight Forward
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  color:#FF0000;}
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  color:#FF0000;  font-size:28px;}
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;}
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;  width:200px;  height:200px;}
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;  width:200px;  height:200px; ...
Commonly Misunderstood:Width, Height, & Padding
The Box Model
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;  width:200px;  height:200px; ...
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;  width:200px;  height:200px; ...
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;  width:100%;  height:200px;  ...
CommonlyMisunderstood:100% Width
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;  width:100%;  height:200px;  ...
HTML:<div class=“hello”>Hello World!</div>CSS:.hello {  background:#FF0000;  font-size:28px;  height:200px;  padding:20px;...
HTML:<div class=“hello”>Hello World!</div>CSS:* { margin: 0; padding: 0; }.hello {  background:#FF0000;  font-size:28px;  ...
HTML:<div class=“hello”>Hello World!</div>CSS:* { margin: 0; padding: 0; }.hello {  background:#FF0000;  font-size:28px;  ...
HTML:<div class=“hello”>Hello World!</div>CSS:* { margin: 0; padding: 0; }.hello {  background:#FF0000;  font-size:28px;  ...
HTML:<div class=“hello”>HelloWorld!</div><div class=“hello”>HelloWorld!</div>CSS:* { margin: 0; padding: 0; }.hello {  bac...
Commonly Misunderstood:Margin Collapse
Margin Collapse
Margin Collapse
This is aGood Thing!              But...
What You Think Should Happen   #masthead { background: #FF8800; margin: 10px; }   #masthead h1 { margin: 20px 10px; }   #m...
What Actually Happens  #masthead { background: #FF8800; margin: 10px; }  #masthead h1 { margin: 20px 10px; }  #masthead p ...
Rule of Thumb:Use Padding Instead of Margin Where     Possible
Use Margins When You Want Them   To Collapse
AnyQuestionsAbout the Box Model?
Third Topic:Floating Elements
Normal FlowHTML:                             CSS:<div class="container">           * { margin:0; padding:0; }  <div class=...
Normal FlowCSS:* { margin:0; padding:0; }body { margin:20px; }.container { padding:20px;   background:#7acfff; }.box { wid...
Floating Properties1. The “float” attribute can have values of “right, left, inherit, and   none.”2. The block element will...
Floating OneCSS:* { margin:0; padding:0; }body { margin:20px; }.container { padding:20px;   background:#7acfff; }.box { wi...
Floating TwoCSS:* { margin:0; padding:0; }body { margin:20px; }.container { padding:20px;   background:#7acfff; }.box { wi...
Floating ThreeCSS:* { margin:0; padding:0; }body { margin:20px; }.container { padding:20px;   background:#7acfff; }.box { ...
Normal Flow   HTML:   <div class="container">     <div class="box one"></div>     <div class="box two"></div>     <div cla...
Clearing the EndCSS:* { margin:0; padding:0; }body { margin:20px; }.container { padding:20px;   background:#7acfff; }.box ...
Using ClearCSS:* { margin:0; padding:0; }body { margin:20px; }.container { padding:20px;   background:#7acfff; }.box { wid...
AnyQuestionsAbout Floating?
Other Misconceptions
Element Positions
Vertical & HorizontalCentering
Ok, One More Thing...
Using This WithWordPress
If You Blog Using...WordPress.com
If You Blog Using...Self-Hosted WP
Final Thoughts
Recommended Book
Validate Your CSS!
Articles & Resources                 @   http://justincarmony.com/cssAdditional Info
Thank You!    Twitter: JustinCarmony       IRC: carmony @ #uphpu on freenode     Email: justin@justincarmony.com   My Blog...
Demystifying CSS & WordPress
Demystifying CSS & WordPress
Upcoming SlideShare
Loading in …5
×

Demystifying CSS & WordPress

2,348 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,348
On SlideShare
0
From Embeds
0
Number of Embeds
939
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

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
  • 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 PeopleHate 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 JustGive 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 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. 15. Let’s Practice!attendee { mouth:smiling; }.blogger { right-hand:raised; }.developer { left-hand:raised; }speaker { currently: “Laughing as he controls theaudience! 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 inCSS when several rules could be applied to the same element in markup.
    19. 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. 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 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. 23. Don’t Panic! Tools To Help You: FireBug - FireFoxDeveloper Tools - Chrome
    24. 24. AnyQuestionsAbout 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. CommonlyMisunderstood: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”>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. 47. Commonly Misunderstood:Margin Collapse
    48. 48. Margin Collapse
    49. 49. Margin Collapse
    50. 50. This is aGood 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. AnyQuestionsAbout the Box Model?
    56. 56. Third Topic:Floating Elements
    57. 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. 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. 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. 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. 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. 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. 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 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. 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. 66. AnyQuestionsAbout Floating?
    67. 67. Other Misconceptions
    68. 68. Element Positions
    69. 69. Vertical & HorizontalCentering
    70. 70. Ok, One More Thing...
    71. 71. Using This WithWordPress
    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/cssAdditional Info
    78. 78. Thank You! Twitter: JustinCarmony IRC: carmony @ #uphpu on freenode Email: justin@justincarmony.com My Blog: http://justincarmony.com/blog/

    ×