As always, we need to understand the document skeleton before we try to clothe it in CSS. The basic document skeleton is given in Listing 10.1. Listing 10.1. The Document Skeleton<body > <div > <div > <div > <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2> </div> <div > [...content...] </div> <div > <h3><span>The Road to Enlightenment</span></h3> [...content...] </div> </div> <div > <div > <h3><span>So What is This About?</span></h3> [...content...] </div> <div > <h3><span>Participation</span></h3> [...content...] </div> <div > <h3><span>Benefits</span></h3> [...content...] </div> <div > <h3><span>Requirements</span></h3> [...content...] </div> <div > [...content...] </div> </div> <div > <div > <div > <h3 ><span>Select a Design:</span></h3> [...list of links...] </div> <div > <h3 ><span>Archives:</span></h3> [...list of links...] </div> <div > <h3 ><span>Resources:</span></h3> [...list of links...] </div> </div> </div> </div> [...extra divs...] </body> Extra divs?
There's a lot more to the document's structure, but Listing 10.1 covers the parts we'll actually need for this project. Listing 10.1 shows just the bare minimum needed to understand the rest of the project because a full listing of the document source would go on for pages and pages, and these fancy color books get more expensive the more pages you have. Now let's take a look at the design we're going to re-create. It's the Photoshop file shown in Figure 10.1. Figure 10.1. The visual design reference file (shown at 50% of normal size).So that's what we're going to do with CSS. To make this work, we're going to need to pull out a number of images that will come in handy later. These are the backgrounds and design elements that we'll need to get the same visual appearance as that shown in Figure 10.1. These images are as follows:
Legal Note
We'll take a closer look at each of these as we come to need them. Now, let's get styling! |