Our sidebar DIV is filled with navigation links - the HTML A tags - and styling these links is what will create the button graphics in our menu. On this page each link will be styled with color, background color, and made into a rectangular shape.

Set Links as Block Elements

The first step is to make the navigation links - the A tags - behave like block elements. Links are normally 'hot', or clickable, only on the text characters within the link. We want the links to be clickable for the entire width of each button within the list.

By setting the links to display:block we essentially set the clickable area of a link to the content width of the link's containing block. Since the links are inside the sidebar DIV the 'hot' part of each link will become a rectangle the width of the sidebar DIV instead of the width of each link's text characters.

Note: Technically, the LI is the containing block for the links but since we have zeroed out all padding and margins for the list, the width of the LI corresponds to the width of the sidebar DIV.
div#sidebar a { display: block; text-decoration: none; background: #fc3; color: #333; }

Setting text-decoration:none turns off the normal link underlining. We want our menu items to look like buttons, not underlined links.

I set the background color to orange. You may use any color you wish.

The link text is set to a dark gray using the color property. Adjust your style declaration to any color which contrasts appropriately with the background color.

The links (menu) should now have a background color and text color. Move the mouse over a link. The cursor should change to indicate a 'hot' link even if you roll the mouse over an empty area of the link on the right side.

Not only is the total width of each link clickable, the background color also extends the total width of the link because the background-color property covers the entire content area of an element, in this case the A element.

example at this point.
Note: You may optionally apply background-color to the sidebar container DIV rather than to the individual links as we've done here. Later on I will show you how to style the DIV and links with different, complimentary background colors.

In the next step we will add padding and borders to the links so they will begin to look distinctive like navigation buttons.