Notes for css structuring:

Make in this order:

1. Generic classes (body, a, p, h1, etc.)
2. #header
3. #nav-menu
4. #main-content

Some pseudo classes:

• :first-child
• :link
• :visited
• :hover
• :active
• :focus
• :lang(n)

General CSS notes:

Body: All the super general stuff:
 - Margin: 0;
 - Font: etc; (100%) then the paragraph/headers etc should be conveted to ems
 - Background: #etc;

#wrap: wraps all content.
 - Margin: 0 auto (if centering)
 - Width: etc;

Navigation

#nav: div class encompassing all of the navigation bar. 
 - background: #etc;
 - width: etc;
 - margin: etc;
 - padding etc
 - For navigation bar in a certain imagem use position:absolute; then define where you want it

#nav.clearfix:after  - class given to the ul in html doc
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;


#nav ul targets the list *as a whole* in the navigation div
  - margin: 0;
 - list-style:  (defines bullet points)
 - padding: etc;

#nav li - defines the list items as elements
 - float: left;
 - border (if wanted)
 - background (color if wanter)
 - margin: 0 1px 0 0; to give a bit of separation between elements

#nav a - targets the links
 - float: left;
 - color: of link in nav bar only
 - text-decoration: underline or not?
 - padding: extends  clickable area
 - display: block - allows padding to be set
 - margin: 0;

Structure

#header h1 - when using a image as heading
    margin: 0;
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0,);


For content inside image:
make sure # is inside another #div (which will be the background later)
 - width:
 - background:
 -  position: absolute (keeps image at certain point)
 - right: etc px; - px from right
 - bottom: etc px; - px from bottom
 - padding: space from box edge to type;

for multiple elements that you want to float (say images) give them all the same CLASS and then specific ones, a space and then another class name
 - float: left
 - width
 - margins