HTML and CSS Reference
In-Depth Information
LISTING 13.3
Continued
#sidebar ol { background-color: white; border: 2px solid #404;
border-top: 0; margin: 0 0 1em 0;
padding: 0.125em 0.25em; }
#sidebar li { font-size: 85%;
display: block; padding: 0.125em 0; }
#sidebar li a:link, #sidebar li a:visited
{ text-decoration: none; color: #055; }
#sidebar li a:hover { color: #404; }
#footer { background-color: #404; color: white;
padding: 0.5em 5em; }
#footer p { margin: 0em; font-size: 85%; }
#footer p a:link, #footer p a:visited
{ color: #DDDD00; }
Figure 13.5 shows the HTML file from Listing 13.1 with both the layout style sheet from
Listing 13.2 and the colors and fonts style sheet from Listing 13.3.
FIGURE 13.5
Fonts and colors
help define the
website's look.
As you can see, the styled page in Figure 13.5 looks quite different from the unstyled
version in Figure 13.3.
Reordering Sections with Positioning Styles
The page in Figure 13.5 looks okay, but let's say that you got this far into the web design
process and you suddenly decide that you want to have the site navigation bar located on
top of the headline, rather than below it.
