CSS Menu

Here's a fun little css stylesheet that one can use for menus.

The CSS for the menu is:

#menu {
    padding:0px;
    width:120px;
}

#menu a {
    text-decoration:none;
    color:#000;
    display:block;
    border:1px solid #fff;
    padding-left:3px;
}

#menu a:hover {
    border:1px solid #000;
}

Which you can use with the following html:

<ul id="menu">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
</ul>

This will producde a simple menu that when hovered over will display a black box around the menu item.

Of course you can change the background color, or the font etc. to whatever you need it to be. Ah the simplicity that is CSS.

Reset Your CSS

Been reading a little here and there regarding resetting CSS before adding your own css styles.

The reason for this, which I'm still not quite sure I understand. Is mostly so your site will look the same across browsers. (IE, FireFox, Chrome, Opera, Safari etc.) While I find this amusing, I've personally never looked into this or even used a reset CSS file.

What does a reset CSS file look like exactly? Here's an example.

/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,
cite,code,dfn,em,strong,th,
var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,
th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;
font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}legend{color:#000}

As you can see, it "resets" all of the styles down to nothing. It's up to you to define how they present on the pages. I suppose this also helps give one the clear mind that since they have reset their CSS that one wouldn't have to deal with unpleasant surprises.

I suppose this could also cause more work to crop up. One would have to set all of their CSS rules. Would be very beneficial to have a base set of CSS rules to go by... perhaps even a template for all website projects.