Cascading Style Sheets part 2

Meyer's reset: http:

box model


css reference CSS ref:


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

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

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

body {
     background-color: #FFFFCC;

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


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


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;


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:


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