Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

430 LESSON 15: Advanced CSS: Page Layout in CSS

#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 15.5 shows the HTML file from Listing 15.1 with both the layout style sheet from

Listing 15.2 and the colors and fonts style sheet from Listing 15.3.

As you can see , the styled page in Figure 15.5 looks quite different from the unstyled

version in Figure 15.3.

Reordering Sections with Positioning Styles

The page in Figure 15.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

above the headline, rather than below it.

You could go in and change your HTML source around. This would work, but it would

introduce a problem. The order of the HTML in Listing 15.1 is sensible—the name of the

site is given first, and then the navigation menu. This is how users of non-CSS browsers

FIGURE 15.5

Fonts and colors

help define the

website’s look.