More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 289

Part 3—Continue Coding CSS
Now you are ready to continue with your styles. Open the threecolumn.html page in
Notepad and position your cursor on a blank line above the closing style tag. First we
will configure the components in the left column as follows:
1. Logo Area. Notice the extra space above the “Door County Wildflowers” text
which is contained within <h1> element in the logo area. You can eliminate this
extra space by setting a 0 top margin for the h1 selector. Also configure the font-
size to 3em for the h1 selector.
h1 { margin-top: 0;
font-size: 3em;
}
2. Navigation Menu. Configure the unordered list to provide for a 20 pixel top
margin and not to display any bullets.
.navBar { margin-top: 20px;
list-style-type: none;
}
Configure the navigation links to have no underline ( text-decoration:none ).
Configure the font size to 1.2em. Pseudo-classes should be configured for link,
visited, hover, active, and focus with different text colors as follows:
.navBar a { text-decoration: none;
font-size: 1.2em;
}
.navBar a:link { color:#006600;
background-color: #eeeeee;}
.navBar a:visited { color: #003300;
background-color: #eeeeee;}
.navBar a:focus { color: #000000;
background-color: #ffffff;}
.navBar a:hover { color: #cc66cc;
background-color: #eeeeee;}
.navBar a:active { color: #000000;}
3. Left Column Image ( sideimages ). Configure this class with a margin of 30 pixels
as follows:
.sideimages { margin: 30px;}
Next, we'll configure the contents of the center column. Styles for paragraphs,
heading elements , and an image that floats to the right need to be constructed.
4. Configure the paragraph selector to use a margin of 20 pixels as follows:
p { margin: 20px; }
5. Configure the h3 selector with the same text color as the logo and the same back-
ground color as the main body of the page as follows:
h3 { color: #cc66cc;
background-color: #ffffff;
}