Case 1: Magnet


The original page design is done as one single image that contains all the text (see Figure 11.1). The background color of the document has been set (through an attribute on the BODY tag) to be the same as the background color of the image. Although the page looks good onscreen, the image has the undesirable effects of being slow to download and difficult to print (although few users would want to print short pages like what's shown in Figure 11.1; printing is more important for longer documents).

Figure 11.1. Original design: Magnet Interactive Communications.


When converting an existing design into CSS, start by collecting design features that are used throughout the page. These design features will be turned into declarations on the BODY element and thereby affect all elements through inheritance. Let's start with the colors. The background color throughout the page is brownish (with an RGB value of #c96 see Chapter 10, "Colors," for a description) and the dominating text color is very dark (#424). This is easily expressed in CSS:

 BODY {   background: #c96;  /* brownish */   color: #424;       /* very dark */ } 

Not all the text on the page is dark, and we later express the exceptions. For now, we are still collecting declarations on the BODY element.

Typespotting is the fine art of detecting font families when seeing them. Becoming a true connoisseur in the field requires years of training and an appreciation of details.


The dominant font family in the original design is a serif (see Chapter 5, "Fonts," for a description), but unless you are a typespotter, it's not immediately clear which one is being used. Studies reveal that the font in use is Bodoni.

Not all computers have the Bodoni font installed, so it's important to specify a generic font family as a fallback option:

 BODY { font-family: Bodoni, serif } 

Giambattista Bodoni: Italian printer and type engraver, 1740 1813. The Bodoni fonts are typically used in advertising and newspaper headlines.


The dominant font size should also be set on the BODY element, and the two declarations can be easily combined with the font family on one line by using the font property:

 BODY { font: 30px Bodoni, serif } 

By using the font property, you also set the other font properties to their initial values (see Chapter 5).

The last declaration to be added to the BODY element is a value on text-align to center the text:

 BODY { text-align: center } 

In the original design, the lines are centered relative to each other, but are still on the left side of the window. With a center value on text-align, the lines will be centered in the window as well, which is arguably a better design.

The off-white text in the original design is clickable links, but because they are embedded in an image, their appearance does not change when clicked. To set colors on links, we use the anchor pseudo-classes described in Chapter 4, "CSS selectors." The following rules (there are three rules, although it may look like one because the selectors are grouped) express the same design in CSS by assigning the same color to all three pseudo-classes:

 A:link, A:visited, A:active { color: white } 

The only stylistic aspect that has not been described yet is the signature at the bottom of the window. It shows the name of the company that produced the page and is embedded in the same image as the main text. When you convert the image to HTML and CSS, it's natural to place this text inside an ADDRESS element. This gives us a selector for the element, and we can easily set the color:

 ADDRESS { color: #c11 }        /* reddish */ 

Also, we need to set the font for the ADDRESS element. The font family is clearly sans-serif, but it's not the common Helvetica or Arial. Instead, we're probably looking at a bold variant of Eurostyle. The font size is roughly half that of the dominant text, and by using the font property, we can set all the font values on one line:

 ADDRESS { font: bold 50% Eurostyle, sans-serif } 

Often, companies feel strongly about the presentation of their name and logo, and because Eurostyle isn't generally available, you may want to let the company name remain an image.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net