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 People
Hate 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 Just
Give Up

11. Don’t Give Up!
You can get passed it!

12. The Solution:
Better Understanding
of CSS

13. First Topic:
Selectors

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. Let’s Practice!
attendee { mouth:smiling; }
.blogger { right-hand:raised; }
.developer { left-hand:raised; }
speaker { currently: “Laughing as he controls the
audience! 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 in
CSS when several rules could be applied to
the same element in markup.

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. 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

23. 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; }

24. Don’t Panic!
Tools To Help You:
FireBug - FireFox
Developer Tools - Chrome

26. Any
Questions
About Specificity?

27. Second Topic:
The Box Model

28. Two Basic Display Types:
Inline & Block

29. Inline
* { display:inline; }

30. Block
* { display:block; }

31. The Box Model
Pretty Straight Forward

32. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
color:#FF0000;
}

33. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
color:#FF0000;
font-size:28px;
}

34. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
background:#FF0000;
font-size:28px;
}

35. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
background:#FF0000;
font-size:28px;
width:200px;
height:200px;
}

36. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
background:#FF0000;
font-size:28px;
width:200px;
height:200px;
padding:20px;
}

37. Commonly
Misunderstood:
Width, Height, & Padding

38. The Box Model

39. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
background:#FF0000;
font-size:28px;
width:200px;
height:200px;
padding:20px;
}

40. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
background:#FF0000;
font-size:28px;
width:200px;
height:200px;
padding:20px;
border: #000000 solid 5px;
}

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. Commonly
Misunderstood:
100% Width

43. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
background:#FF0000;
font-size:28px;
width:100%;
height:200px;
padding:20px;
border: #000000 solid 5px;
}

44. HTML:
<div class=“hello”>
Hello World!
</div>
CSS:
.hello {
background:#FF0000;
font-size:28px;
height:200px;
padding:20px;
border: #000000 solid 5px;
}

45. 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;
}

46. 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;
}

47. 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;
}

48. 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;
}

49. Commonly Misunderstood:
Margin Collapse

50. Margin Collapse

51. Margin Collapse

52. This is a
Good Thing!
But...

53. What You Think Should Happen
#masthead { background: #FF8800; margin: 10px; }
#masthead h1 { margin: 20px 10px; }
#masthead p { margin: 5px 10px; font-style: italic; }

54. What Actually Happens
#masthead { background: #FF8800; margin: 10px; }
#masthead h1 { margin: 20px 10px; }
#masthead p { margin: 5px 10px; font-style: italic; }

55. Rule of Thumb:
Use Padding Instead
of Margin Where
Possible

56. Use Margins When
You Want Them
To Collapse

57. Any
Questions
About the Box Model?

58. Third Topic:
Floating Elements

59. 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; }

60. 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; }

61. 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.

62. 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; }

63. 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; }

64. 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; }

65. 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>

66. 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; }

67. 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; }

68. Any
Questions
About Floating?

69. Other Misconceptions

70. Element Positions

71. Vertical & Horizontal
Centering

72. Ok, One More Thing...

73. Using This With
WordPress

74. If You Blog Using...
WordPress.com

75. If You Blog Using...
Self-Hosted WP

76. Final Thoughts

77. Recommended Book

78. Validate Your CSS!

79. Articles & Resources
@
http://justincarmony.com/css
Additional Info

80. Thank You!
Twitter: JustinCarmony
IRC: carmony @ #uphpu on freenode
Email: justin@justincarmony.com
My Blog: http://justincarmony.com/blog/