ptg16476052438 LESSON 15: Advanced CSS: Page Layout in CSS
The style sheet in Listing 15.7 is really the same style sheet as in Listing 15.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 15.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
{ font-size: 90%; }
#nav .shead, #nav .sitem
{ padding-left: 1em; padding-right: 1em; }
#nav h1 { font-size: 1em;
background-color: #333333; color: white; }
#nav a:hover, #footer a:hover
{ color: lime; }
#nav a:link, #nav a:visited,
#footer a:link, #footer a:visited
{ text-decoration: none; color: #CCCCCC; }/* main content section */
#main { margin-left: 11.5em; margin-right: 11.5em;
margin-bottom: 1.5em; margin-top: 1.5em;
border: 0px solid lime; }