Demystifying CSS & WordPress

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.justincarmony.com/blog/

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 Can’t Browsers Just Get Along?

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

Sometimes It Is...

User Error

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

The Solution:

Better Understanding
of CSS

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 */

Let’s Practice!
attendee { mouth:smiling; }

.blogger { right-hand:raised; }

.developer { left-hand:raised; }

speaker { currently: “Laughing as he controls the
audience! Mwuahahaha!”; }

Which Rule to Rule Them All?

* { color:black; }

a { color:blue; }

#content a { color:red; }

html body article .entry-post a { color: green; }

Commonly Misunderstood:

CSS Speciﬁcity

Speciﬁcity Deﬁnition:

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.

Speciﬁcity 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 )

Calculating Speciﬁcity
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

Calculating Speciﬁcity
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

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

Don’t Panic!

Tools To Help You:

FireBug - FireFox
Developer Tools - Chrome

Any

Questions
About Speciﬁcity?

Second Topic:

The Box Model

Two Basic Display Types:

Inline & Block

Inline

* { display:inline; }

The Box Model

Pretty Straight Forward

HTML:
<div class=“hello”>
Hello World!
</div>

CSS:
.hello {
color:#FF0000;
}

HTML:
Hello World!
</div>

CSS:
.hello {
color:#FF0000;
font-size:28px;
}

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
}

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
width:200px;
height:200px;
}

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
width:200px;
height:200px;
padding:20px;
}

Commonly
Misunderstood:

Width, Height, & Padding

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
width:200px;
height:200px;
padding:20px;
border: #000000 solid 5px;
}

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
width:100%;
height:200px;
padding:20px;
}

Commonly
Misunderstood:

100% Width

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
height:200px;
padding:20px;
}

HTML:
Hello World!
</div>

CSS:
* { margin: 0; padding: 0; }
.hello {
background:#FF0000;
font-size:28px;
height:200px;
padding:20px;
border: #0000FF solid 5px;
}

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
height:200px;
padding:20px;
margin: 20px 10px 20px 10px;
}

HTML:
Hello World!
</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
height:100px;
padding:20px;
}

HTML:
<div class=“hello”>Hello
World!</div>
<div class=“hello”>Hello
World!</div>

CSS:
.hello {
background:#FF0000;
font-size:28px;
height:100px;
padding:20px;
}

Commonly Misunderstood:

Margin Collapse

This is a
Good Thing!
But...

What You Think Should Happen

#masthead { background: #FF8800; margin: 10px; }
#masthead h1 { margin: 20px 10px; }
#masthead p { margin: 5px 10px; font-style: italic; }

What Actually Happens

#masthead { background: #FF8800; margin: 10px; }
#masthead h1 { margin: 20px 10px; }
#masthead p { margin: 5px 10px; font-style: italic; }

Rule of Thumb:

Use Padding Instead
of Margin Where
Possible

Use Margins When
You Want Them
To Collapse

Any

Questions
About the Box Model?

Third Topic:

Floating Elements

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

Normal Flow
CSS:
* { margin:0; padding:0; }
body { margin:20px; }
.container { padding:20px;
background:#7acfff; }
.box { width:100px;
height:100px; }
.one { background:red; }

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.

Floating One
CSS:
.box { width:100px;
height:100px; }
.one { background:red;
ﬂoat:right; }

Floating Two
CSS:
.box { width:100px;
height:100px; }
ﬂoat:right; }
.three { background:blue;
ﬂoat:right; }

Floating Three
CSS:
.box { width:100px;
height:100px; }
float:right; }
.two { background:green;
float:left; }
float:right; }

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>

Clearing the End
CSS:
.box { width:100px;
height:100px; }
float:right; }
float:left; }
float:right; }
.clear { clear:both; }

Using Clear
CSS:
.box { width:100px;
height:100px; }
float:right; }
float:left; }
float:right; clear:right; }
.clear { clear:both; }

Any

Questions
About Floating?

Vertical & Horizontal

Centering

If You Blog Using...

WordPress.com

If You Blog Using...

Self-Hosted WP

Articles & Resources
@
http://justincarmony.com/css

Additional Info

Thank You!

Twitter: JustinCarmony

IRC: carmony @ #uphpu on freenode

Email: justin@justincarmony.com

My Blog: http://justincarmony.com/blog/

Demystifying CSS & WordPress

Recommended

More Related Content

Similar to Demystifying CSS & WordPress (20)

Recently uploaded (20)

Demystifying CSS & WordPress

Editor's Notes