STEP 6 (Footer)

Moving along we will finish off with the footer of the site. Let’s start our footer by creating a div with an id of footer. Add two paragraph tags and type in the text statement per the design. Then an heading 3 tag for the title of the navigation and an unordered list tag just like how you did it in the header section except the id name for this navigation is subNav. I found it is good practice to have another way for the users to navigation your site within having to scroll all the way back up to the main navigation. Your code should now look like this.

HTML:

<div id="wrapper">
	<div id="header">
    	<a href="#" title="Home"><img src="images/logo.png" width="474" height="52" alt="Logo" id="logo" /></a>
        <h1 id="tagline">I sell innovation to the world.  I'm a Mac...</h1>

        <div id="login">
        	<img src="images/loginIcon.png" width="32" height="30" alt="Login" />
            <a href="#" title="Login">Login</a> | <a href="#" title="Register">Register</a>
        </div><!--close login-->

        <div id="meta">
        	<img src="images/cartIcon.png" width="63" height="51" alt="Shopping Cart" />
            <p>2 items in cart.</p><a href="#" title="RSS Feed">RSS Feed</a>
        </div><!--close meta-->
        <img src="images/divider.png" width="349" height="18" alt="Divider" id="divider" />

        <form action="" method="post" id="search">
        	<fieldset>
                    <p id="searchfield"><label for="search">Search:</label><br />
                        <input type="text" name="search" value="" />
                    </p>
          </fieldset>
                    <input type="submit" value="Submit" name="submit" class="button"/>
        </form>

        <ul id="nav">
            <li><a href="#" title="Home">HOME</a></li>
            <li><a href="#" title="Shop">SHOP</a></li>
            <li><a href="#" title="Contact">CONTACT</a></li>
        </ul>

    </div><!--close header-->
    <div id="content" class="group">
    <div id="leftCol">
    	<h2>Introducing the all new Macbook Air! Everything you need in a notebook without the weight...</h2>
        <img src="images/macair.jpg" width="586" height="320" alt="Macbook Air" />
    </div><!--close leftCol-->

    <div id="rightCol1">
    	<img src="images/star.png" width="62" height="60" alt="Star" />
        <p>SAVE 20% on our COMBO deal!</p>
        <img src="images/keyboardmouse.jpg" width="138" height="138" alt="Mouse and Keyboard" id="mousekeyboard" />
        <a href="#" title="add to cart">Add to Cart</a>
    </div><!--close rightCol1-->

    <div id="rightCol2">
    	<img src="images/figure.png" width="67" height="74" alt="Figure" />
    	<p>Learn to use the Mac!</p>
        <img src="images/learnMac.jpg" width="157" height="171" alt="Learn the Mac" id="learnMac" />
        <a href="#" title="learn the Mac">Click and Learn</a>
    </div><!--close rightCol2-->
    </div><!--close content-->

    <div id="footer">
    	<p>Copyright &copy; 2010 Design in the Raw, All Rights Reserved.</p>
        <p>All images and graphics belong to their respective owners.</p>
        <h3>Navigation</h3>
        <ul id="subNav">
        	<li><a href="#" title="Home">HOME</a></li>
            <li><a href="#" title="Shop">SHOP</a></li>
            <li><a href="#" title="Contact">CONTACT</a></li>
        </ul>
    </div><!--close footer-->

</div><!--close wrapper-->

At this point your website should look like THIS

STEP 7 (Styling the Reset)

On to the meat of the tutorial and where all the fun begins…
From here I will explain in detail only the not so obvious code as this tutorial will be way too long if I redundantly repeat what “margins” are for…
Let’s start by creating a file called “reset.css”. We will be using the reset template based on Eric Meyer’s reset CSS.

CSS: (reset.css)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
 ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

STEP 8 (Styling the General Area)

After loading the reset CSS, we can now load the “style.css”. So create another file called “style.css”. I like to section out my CSS in a very readable way in case others need to look through my code. We start by titling a section called “GENERAL” and then a section called “UTILITY”. “GENERAL” as name implies, contains the general layout CSS and the “UTILITY” section contains in this particular demo, the float clearing utility. So basic utility serves the site wide CSS to perform a utility action if you will.
Within “GENERAL” I have set a global font on the “body” and “html” tags. That means use this font site wide unless specified. Then we set a style for the heading 2 tag as I know we will be needing later. I then gave it a bottom margin. You might be asking how come you just don’t put line break tags in the markup? My rule of thumb is if you want a margin beyond one line break, don’t use line break tag, use margins instead. Or else in your markup you will be seeing many line break tags everywhere. Remember, CSS is for styling and HTML is the for markup structure. Then comes the wrapper tag and it is set to 960 pixel width so it accommodates to the 1024×768 resolution visitors. We then set the margin to “0 auto” to center the site on the screen. Finally we have the “UTILITY” section which we declared a class called “group” to help with clearing the floats. I will not go into detail as to what the attributes in this class do on this tutorial and will be explaining it in detail in a future tutorial but just know that it clears floats for now. We should have the following in our “style.css”.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}