First Time HTML5/CSS Site

I am working on my first HTML5/CSS web site and, like all of my first-time projects, they end up cumbersome, crude, and hard to work with when changes need to be made later in the life cycle. I am attaching some code with a small amount of HTML and CSS. I have read up on CSS and HTML and, after quite alot of effort, have ended up with this. Please look at the code and fill me in on any inefficiencies that I may have introduced due to lack of experience. I do feel like I am doing a little bit too much manually right now and this is just a basic web site. Any opinion will be appreciated. FYI: I have left the colors a bit funny in order to easily see changes to the web site.



`/*
Created on : Mar 24, 2014, 9:05:35 AM
Author : meggleston
*/
#listheader
{
position:absolute;
top:90px;
width:100%;
background:cadetblue;
height: 80px;
text-align: center;
}

#header
{
top: 0;
position: absolute;
height: 90px;
width: 100%;
background: #007400;
margin: 0px;
padding: 0px;
}

#logo
{
position:absolute;
background-image:url(../assets/pics/logomain.png);
background-repeat: no-repeat;
background-re:no-repeat;
background-position: left top;
background-size:100px 90px;
height: 100;
width: 100;
}

body
{
margin: 0px;
padding: 0px;
}

#site1Container
{
position:absolute;
background-color: #cd0a0a;
top:170px;
width: 100%;
height: 180px;
}

#site2Container
{
position:absolute;
background-color: bisque;
top:350px;
width: 100%;
height: 180px;
}

#site3Container
{
position:absolute;
background-color: darkgoldenrod;
top:530px;
width: 100%;
height: 180px;
}

#site1logo
{
position:absolute;
top:20%;
background-image:url(../assets/pics/logo1.png);
background-repeat: no-repeat;
background-re:no-repeat;
background-position: left top;
background-size:100px 100px;
height: 100%;
width: 100;
}

#site2logo
{
position:absolute;
top:20%;
background-image:url(../assets/pics/logo2.png);
background-repeat: no-repeat;
background-re:no-repeat;
ba

Semantically, I would suggest using HTML5 elements more.

For example, instead of...

Use instead: (the ID can stay if you want it to)

This would change your CSS from #header {} to just header {}

It is common to see multiple tags in complicated templates. So something like this might be appropriate if that is the case...

CSS would be:

header.site-header {}

Consistency, consistency, consistency.

Most of your class and ID names are completely lowercase. However a few classes use camelCase like: #site3Container

Make your naming conventions consistent. Either use all camelCase or use all lowercase or all UPPERCASE etc.

Typically, I use lowercase for HTML and CSS (faster to write). I use camelCase for PHP. This is no rule however.

Positioning

Absolute positioning has its uses. It's almost never used for basic layout however.

Your exact layout can be achieved without the use of ANY position: absolute;. It is my general recommendation to avoid position: absolute; at almost all times. If you are finding you need to use it for something, chances are you don't actually need to, you just don't know how else to do it yet. Consult someone.

Here is a JSFiddle of your current html and css

Here is a JSFiddle demonstrating the same layout, without positioning.

*Note that the description text now has a maximum width of 960px (common site width, though 1140 is becoming more common). The description divs are also center so there will always be equal space on left and right sides.

My modifications above also feature one particular additional CSS selector:

* { margin: 0; padding: 0; }

The asterisk * is a wildcard, it essentially means ANY element. The selector above resets the margin and padding of every element to 0. This is usually done via something called a "reset stylesheet". Which leads me to my next subject...

Reset Stylesheets

Reset stylesheets contain CSS code which standardizes what your website will look like across all browsers. It sets all padding and margins to 0 for instance, so that no default styling is added to your site that you potentially, or even probably, don't want.

A quick Google search lands us at this website: http://www.cssreset.com/

There, you can see many popular reset stylesheets, all with their own different sort of caveats and specialities. I personally recommend Normalize.css It keeps and standardizes some typical styles you may not necessarily want to reset to 0. It also contains some standard typography styling, so your text looks great without you having to do any work. Reset stylesheets should always be the very first .css file you link. So you would include yours like this for instance:

    Site Title
    
    
    
    

Classes over ID's

An ID is specific, they can be used once. It IS this "thing" and it is only ever this "thing". A class can be just as specific, or as broad as you would like. A class can be applied to multiple elements on the same page. An example, expanding from the JS Fiddles above, would be to combine the styles for the description divs.

We start with this CSS:

#site1desc
{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

#site2desc
{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

#site3desc
{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

By modifying the HTML so that every ` is now this: We can drastically cut down on our total CSS code. Our full HTML now looks like the below...

    
    Site description goes here.

    
    Site description goes here.

    
    Site description goes here
    

The only CSS we need changes from the 3 selectors above to just this:

.contentdesc
{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

JSFiddle Demo of the above

***Note: CSS classes are referenced with a period .className is different from #idName`

StackExchange Code Review Q#45408, answer score: 41