How would you better organize/code this basic HTML and CSS? I'm curious to see what any of the more experienced programmers would do instead of methods I took as a learning tool. Any tips/tricks/fixes and reasoning is appreciated!!

http://www.jacobweyer.com

This is the result of the code so far:

&lt;!DOCTYPE html&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Alpha Tau Omega | Theta Omega&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="ATOStyle.css" /&gt;

&lt;/head&gt;


&lt;body&gt;
&lt;div id="header"&gt;
    &lt;div id="innerheader"&gt;
        &lt;div id="banner"&gt;
        &lt;/div&gt;
        &lt;div id="title"&gt;
            &lt;!--&lt;p&gt;Alpha Tau Omega&lt;/p&gt;
            &lt;p&gt;Theta Omega&lt;/p&gt;--&gt;
        &lt;/div&gt;
        &lt;div id="navbar"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="rush.html"&gt;Rush&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="history.html"&gt;History&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="alumni.html"&gt;Alumni&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="calendar.html"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="media.html"&gt;Media&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
&lt;div id="pagecenter"&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
&lt;div id="footercontent"&gt;
&lt;div id="footerbanner"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&amp;nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#navbar ul li a {
text-decoration: none;
color: black;  
}
#navbar ul li a:hover {
color: white;
}

#navbar ul li {
font-family: Arial, Helvetica, sans-serif; 
text-decoration: none;
color: #000000;
display: inline-block;
width: 70px;
height: 40px;
margin: 10px;
}

#banner {
background:url(./pieces/banner.png);
position: absolute;
margin-left: 0px;
min-height: 193px;
min-width: 183px;
background-repeat: no-repeat
}

#title {
position: absolute;
background: url(./pieces/name.png);
margin-left: 190px;
min-height: 75px;
min-width: 285px;
}

#navbar {
position: relative;
top: 80px;
left: 210px;
margin-left: inherit;
}
#social ul li{
display: inline-block;
width: 35px;
height: 35px;
margin: 5px;
}
#social {
position: absolute;
float: left;
right: 180px;
top: -5px;
}
#social ul {
list-style-type: none;
}

#innerheader {
height: 139px;
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#header {
background:url(./pieces/headerBar.png);
position: static;    
width:100%;
height:139px;
padding:0;
border:0;
z-index: 10000;
}

#pagecenter {
position: static;
margin-right: auto;
margin-left: auto;
height: 50px;
width: 750px;
min-height: 1000px;
background:url(./pieces/mainBG.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: -19px;
z-index:50
}
body {
width: 100%;
margin: 0px 0px 0px 0px;
background-color: #808080
}
#footer {
margin-top: 20px;
padding-top: 30px;
background: url(./pieces/footerbar.png);
height: 77px;
width: 100%;
margin-right: auto;
margin-left: auto;
clear: both;
bottom: 0px;
position: static;
}

#footerbanner {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
}
A lot of this type of stuff is just personal style, or if you're working on a team, the layout is defined ahead of the project.

The use of classes vs id's is also personal. I've seen people say that they ALWAYS use classes. I've tried both classes and id's on many pages, and I find that I get into fewer problems with mostly classes, reserving id's for truly individual elements.

I've read that the stuff at the top of your CSS can slow things down quite a bit and may not be necessary in many cases.

I formatted the last two parts of your CSS a bit differently. I do that a lot with PHP, but have seen in recently in CSS, and I think it might work nicely in some situations.

But for fun...

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Alpha Tau Omega | Theta Omega&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="ATOStyle.css" /&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="header"&gt;
  &lt;div id="innerheader"&gt;
    &lt;div id="banner"&gt;&lt;/div&gt;
       &lt;div id="title"&gt;&lt;!--&lt;p&gt;Alpha Tau Omega&lt;/p&gt; &lt;p&gt;Theta Omega&lt;/p&gt;--&gt;&lt;/div&gt;
       &lt;div id="navbar"&gt;
         &lt;ul&gt;
           &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="rush.html"&gt;Rush&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="history.html"&gt;History&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="alumni.html"&gt;Alumni&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="calendar.html"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="media.html"&gt;Media&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/div&gt;&lt;!--end navbar--&gt;
    &lt;/div&gt;&lt;!--end banner--&gt;
  &lt;/div&gt;&lt;!--end  innerheader--&gt;
&lt;/div&gt;&lt;!--end header--&gt;

&lt;div id="pagecenter"&gt;&lt;/div&gt;

&lt;div id="footer"&gt;
  &lt;div id="footercontent"&gt;
    &lt;div id="footerbanner"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;!--end footer--&gt;

&lt;/body&gt;
&lt;/html&gt;


CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&amp;nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
#navbar ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#navbar ul li a {
  text-decoration: none;
  color: black;  
}
#navbar ul li a:hover {
  color: white;
}
#navbar ul li {
  font-family: Arial, Helvetica, sans-serif; 
  text-decoration: none;
  color: #000000;
  display: inline-block;
  width: 70px;
  height: 40px;
  margin: 10px;
}
#banner {
  background:url(./pieces/banner.png);
  position: absolute;
  margin-left: 0px;
  min-height: 193px;
  min-width: 183px;
  background-repeat: no-repeat
}

#title {
  position: absolute;
  background: url(./pieces/name.png);
  margin-left: 190px;
  min-height: 75px;
  min-width: 285px;
}
#navbar {
  position: relative;
  top: 80px;
  left: 210px;
  margin-left: inherit;
}
#social ul li{
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 5px;
}
#social {
  position: absolute;
  float: left;
  right: 180px;
  top: -5px;
}
#social ul {
  list-style-type: none;
}

#innerheader {
  height: 139px;
  width: 750px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#header {
  background:url(./pieces/headerBar.png);
  position: static;    
  width:100%;
  height:139px;
  z-index: 10000;
}

#pagecenter {
  position: static;
  margin-right: auto;
  margin-left: auto;
  height: 50px;
  width: 750px;
  min-height: 1000px;
  background: url(./pieces/mainBG.png);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: -19px;
  z-index:50
}
body {
  width: 100%;
  margin: 0px 0px 0px 0px;
  background-color: #808080
}
#footer {
  margin-top:   20px;
  padding-top:  30px;
  background:   url(./pieces/footerbar.png);
  height:       77px;
  width:        100%;
  margin-right: auto;
  margin-left:  auto;
  clear:        both;
  bottom:       0px;
  position:     static;
}
#footerbanner {
  background:        url(./pieces/footerbanner.png);
  position:          absolute;
  min-height:        95px;
  min-width:         90px;
  background-repeat: no-repeat;
  margin-top:        -30px;
}