Accessibility - Refactoring HTML: Improving the Design of Existing Web Applications - page 207

Code View:
<div style="width: 84px; height: 64px;">
<div style="background-color: #3D468B;
color: white;
font-family: Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
padding-top: 4px;
padding-bottom: 3px;
border-bottom-style: solid;
border-bottom-width: medium;
border-bottom-color: #FBE537;
letter-spacing: 0.08em">
PEARSON
</div>
<div style="background-color: #327BBF;
color: white;
padding-left: 0.5em;
padding-top: 6px;
font-family: Times, serif;
font-size: 12pt;">
<div>
Addison
</div>
<div style="text-indent: 1.5em;
padding-bottom: 5px;">
Wesley
</div>
</div>
</div>
Figure 6.2 shows the rendered result.
Figure 6.2. The Addison-Wesley logo re-created in HTML+CSS
We can do even better if we allow ourselves to use background images, as shown in Listing 6.2 and Figure 6.3 .
Now we get the swoosh and everything.
Listing 6.2. Addison-Wesley Logo in HTML and CSS with Background Image