Reskinning the Menu

Now that we’ve come this far, let’s throw out most of the styles and try a new approach. We’re getting rid of the majority of the styles already created and starting with a very basic set, as seen in Listing 5.4.

Listing 5.4. Starting Over
<style type="text/css">
/* menu styles */
td#sidelinks a {display: block;}
td#sidelinks h4 {padding: 1em 0 0;}
td#sidelinks a, td#sidelinks h4 {margin: 0;
   font: bold 100% Arial, Verdana, sans-serif;}
</style>

The styles we’ve left in place create a foundation on which to build. The links are made block-level; the h4 elements given some top padding but no other. Finally, both the links and h4 elements are given no margin and set to a consistent font weight, size, and family.

Where do we ...

Get Eric Meyer on CSS: Mastering the Language of Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.