HTML and CSS Reference
In-Depth Information
LISTING 13.6
Continued
#nav { border-bottom: 1px solid lime; } #main { margin-left:
11.5em; margin-right: 11.5em; border: 0px solid lime;
margin-bottom: 1.5em; margin-top: 1.5em; }
#nav a:hover, #footer a:hover { color: lime; }
#sidebar0 { position: absolute; left: 2em; top: 3em;
width: 9em; text-align: right; }
If that was hard to follow, don't feel bad; the difficulty was intentional. CSS rules are
easily obfuscated if you're not careful. Most style sheets grow organically as piecemeal
additions are made; discipline is necessary to keep the style sheet readable.
The style sheet in Listing 13.7 is really the same style sheet as in Listing 13.6. Both are
valid style sheets and both produce the same results when applied to the web page, but
the second one is easier to understand. Comments make clearer what each section of the
style sheet does, indentation and whitespace are used effectively, and the order is much
easier to follow.
LISTING 13.7
A Better-Organized Style Sheet
/* default styles for the page */
body { background-color: white;
color: #333333;
font-family: Verdana, sans-serif;
margin: 0;
padding: 0; }
a:link { color: #DD8800; text-decoration: none; }
a:visited { color: #CC8866; text-decoration: none; }
a:hover { color: lime; }
/* layout superstructure */
#layout { padding: 1em; }
/* top navigation bar */
#nav { position: fixed;
top: 0px; left: 0px;
color: white; width: 100%;
padding-top: 3px; padding-bottom: 3px;
background-color: #333333;
text-align: center;
text-transform: lowercase; }
border-bottom: 1px solid lime; }
#nav .section, #nav .shead, #nav .sitem, #nav h1
{ display: inline; }
#nav .section
