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

Font (Shorthand order)

Order:

font: style variant weight size/lineheight family, serif/sans-serif;

Optionals: style variant and weight (if used they must come before the size)

Line-height is also optional (and if omitted, remove /)

Required: Size, family and serif/sans-serif required - and must be in that order.

Revision

Unit sizes:

Can be:

- px size e.g. 1px

- em size - which is the default size of the browser times by the number (1.2em = 1.2*16)

- percentage size - 100% of the parent

- in/cm/mm - Measurement units equal to size of real life - can be used when determining size for printer.

Element selectors:

CSS - p { color: blue;}

Selects the element specified in selector

HTML - <p> Hero <p>

CSS -  .copyright { color: blue;}

Selects classes named "copyright"

HTML - <p class="copyright">copyright from 2010</p>

CSS - #wrap { color:blue;}

Selects ID "wrap" - only one ID per HTML document

HTML - <div id="wrap"> </div>

CSS - * {color: blue;}

Selects every element

CSS - img[src="image.png"] {border-color: red;}

**Check** Selects the item in the brackets - these can be just [src] or the whole value [src="image.png"]

HTML - <img src="image.png">

CSS - li > p {color:blue;}

Selects the second element only if it is a direct child of the first.

HTML - <li><p>hero</p></li>

CSS - li p {color:blue;}

Selects right handed element when a child of left - but doesn't have to be a direct child - value travels down the hierarchy

HTML - <li><div><p>hero</p></div></li>

CSS - h2 + p + div {color:blue;}

Selects attributes with these descriptors on the same level of hierarchy (for example, if they were all within the same div)

HTML - <h2> cat </h2><p>mouse</p><div></div>

CSS - a:hover {color:blue;}

Applies the value to the A attribute but only when it is "hovered" (or similarly described action is activated)

HTML <a href="hotmail.com>meow</a>

CSS - p:first-letter {color:blue;}

Targets the first letter of every <p> element

Class Exercise

Navigation Bar 1)

Navigation Bar 2) Based Off ImagineFx Bar