Tutorial [CSS] A Basic Tab Menu!

Hey! Im Velozity. Im a learner in css at the moment, and wish to release what I go through :) - In hope that it helps other beginners!

Heres what you will be making:
Spoiler (Click to View)
(And when you hover over the menu it will light up/animate)
---------------------------------
Step 1: Get your tags in!
Start with your basic tags....

Quote:<html>
<style>
</style>
<body>
</body>
</html>

(http://prntscr.com/4oupnn)
----------------------------------
Step 2: Getting your CSS on!
Start with the background and padding!:

Quote:html, body
{
background-color:#696969;
padding:0px;
margin:0px;
}

(http://prntscr.com/4oupvb)

Then move onto getting the hover(Mouse over box, lights up)

Quote:.box:hover
{
background-color:white;
color:grey;
}

(http://prntscr.com/4ouq8w)

Now we start with the first box!(The first tab)

Quote:.box
{
padding:5px;
text-decoration:none;
background-color:grey;
height:52px;
width:50px;
}

(http://prntscr.com/4ouqdv)

Now we move onto the href settings..

Quote:a
{
color:white;
text-decoration:none;
padding:10px;
line-height:55px;
float:right;
}

(http://prntscr.com/4ouqmg)

Then we get on the main header(The dark grey)

Quote:#header
{
width:100%;
background-color:#696969;
height:65px;
}

(http://prntscr.com/4ouqv1)

Then we finish with....

Quote:.bigbox
{
background-color:#595959;
width:59px;
height:100%;
}

Now thats the end of CSS!
Moving onto the simple html stuff :)

Inside your <body> tags be sure to add the following..

Quote:<div class="bigbox">

<div id="header">
<div class="box">
<a href="home.html">Home</a></div>
<br>
<div class="box">
<a href="shop.html">Shop</a>
</div>
</div>

^^ Edit the above to your div class name...(leave if just copied/pasted mine)

-------------------------------------
If you wish to view the whole code, you can view it here:
Spoiler (Click to View)

Hope, I have helped.. If you want some clearing up on anything feel free to contact me! If I have got this in the wrong thread, please move it :) or let me know.