This is the slide deck portion of "Style With Kyle", there is also a live demo where I will be coding some css in a basic page. Those files will be run off my laptop. Please let me know if you would like to see those before the presentation.

1. INTRO TO CSS
Presented by Kyle Smith
WordCamp 2012

2. WHAT IS CSS?
CSS or Cascading Style Sheets is a programing
language designed to give HTML Markup dynamic
style and help arrange the content in a more usable
and appealing manner.

3. STRUCTURE:

4. BOX MODEL

5. HOW DO WE WRITE IT?
#content {
width: 300px;
height: 250px;
background-color: #353535;
padding: 10px 15px 20px 10px;
margin: 0;
color: red;
}

6. TARGETING ELEMENTS
We can target specific content (or “elements”) in three different ways.
These can also be combined to be more specific in how we target them.
Element - This selects all of the instances of this
element within the document.
ID - This selects specific elements so that style only
effects a single instance. IDs select ONE item.
Classes - This selects more than one instance, like
elements, but more specifically. Classes select
MULTIPLE items.

7. CONCEPTS
Floating - The floating attribute takes elements out of the
flow of the document and moves them to the left or right.
Absolute Positioning - The Absolute attribute will take
also take items out of the flow of the document and
allow you to exactly place them.
Display - The Display attribute allows elements to take
on fixed shapes as well as hide them entirely.
Z-Index - The Z-Index attribute allows you to place
elements on top of each-other like papers in a stack.

8. BASIC ATTRIBUTES
Width: sets the width of an item
Height: sets the height of an item
Color: sets the color of text
Font-family: sets the font to be displayed
Padding: Sets the space between the content and the border
Margin: Sets the space outside of the border of the content
Float: Moves an element to the left or to the right
Clear: Removes the float inherited from the element above
Absolute: Removes the element from the flow to allow for exact
placement
Display: Defines how a certain element should be displayed
Background: Sets the background of an element, can be a color,
image or even transparent

9. SOME THINGS TO REMEMBER
If something doesn’t appear properly, check your css!
If something doesn’t appear at all, double check how
you are selecting it. IDs and Classes are not the same!
Keep your CSS organized! It will help you later if you
run in to a problem.

10. DEMO!