Eric Meyer on CSS: Mastering the Language of Web Design

Styling the Document

Basically, we have two main tasks ahead of us:

• To make the page look like it did when it relied on HTML-based presentation

• To push the icons to a new level of visual effect by applying some creative CSS to them

Getting Back to Square One

Before we get down ‘n’ dirty with the links, let’s quickly reproduce the original basic design look in CSS. Because we have the HTML file to guide us, we can just rewrite the styles to match what we had before (see Figure 4.3).

<style type="text/css">
body {background: #CEC; color: black;}
td#navbuttons {background: #ACA; padding: 0;
   border: 2px solid #797;}
td#main {background: #FFD; color: black;
   border: 2px solid #797;}
</style>

Figure 4.3. The first step in re-creating the basic design. ...