Cascading Style Sheets part 2
reset

Meyer's reset: http:http://meyerweb.com/eric/tools/css/reset/

box model

W3Schools: http://www.w3schools.com/css/css_boxmodel.asp

css reference CSS ref: http://www.w3schools.com/cssref/default.asp
 

 Measuring:

  • Pixels (px)
  • Percentages (%)
  • Ems (em)
  • Points (pt)
formatting use class styles & tag styles
positioning use id (containers) styles
spacing

margin values & padding values

  • 1 value - spacing all around
  • 2 values - top/bottom & left/right
  • 4 values - clockwise (top, right, bottom, right)
  • auto - center that margin
body

background image or color (even just to help see the other containers)

body {
     background-color: #FFFFCC;
}

wrapper
  • dimension of main area of webpage - 900px
  • margins -  top and bottom from the edge - use a value
  • usually centered in the middle (left and right) - auto
  • background color for main part of webpage

#wrapper {
     width: 900px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
     background-color: #FFF;
}

or

#wrapper {
     width: 900px;
     margin: 0px auto;
     background-color: #FFF;
}

outer margin area
  • create another container around the wrapper and increase the width. 
  • copy all the styles from the wrapper.

#outer {
     width: 960px;
     margin: 0px auto;
     background-color: #FFF;
}

header

easier to divide into boxed containers if there are several peices

logo aligned to the left

  • float left
  • margin from edges of other container - top & bottom, left and right

#logo {
     float: left;
     margin: 30px auto;
}

something aligned to the left

  • float right
  • margin from edges of other container - top & bottom, left and right

#socialmedia {
     float: right;
         margin: 30px auto;
}

clearing float values

clearing an area after a float:

clear: both;

navigation

hierarchy: div id name, ul, li, a

descendent selectors example:

#nav {
...
}


#nav ul {
...
}

#nav ul li{
...
}

#nav ul li a{
...
}

 

nav ul - border with padding (and margin)

nav ul li - padding between, border between

formatting a list

ul li property to change the line up of the items:

display:inline;

anchor tags (hyperlinks) pseudo-classes for anchor tag

a:link - new unvisited link

a:visited - a link that has already been clicked

a:active - a link being followed

a:focus - keyboard focus

a:hover - mouse hover over link