HTML and CSS Reference
In-Depth Information
Modify the footer id to display a 2 pixel double black top border ( border-
top : 2 px double #000000 ). Also configure 20 pixels of padding-top and
padding-bottom in the footer id.
Save the javajam.css file.
3. Modify the index.html File. Add <div> elements and modify the code as follows:
Configure the logo area. Assign the <h1> to the id logo.
Configure the left column navigation area. The navigation links are the only
content in the left column. Remove other code, including any &nbsp; charac-
ters that may be present.
The right column content area should already be contained within the div
assigned to the content id.
Configure the area that floats to the right. Modify the winding road image ele-
ment. Remove the align="right" attribute and add class="floatright" to
the winding road image element.
Save the index.html file. It should look similar to the Web page shown in Figure
6.25. Remember that validating your XHTML and CSS can help you find syntax
errors. Test and correct this page before you continue.
4. Modify the menu.html and music.html Files. Modify the code in these Web page
files in a similar manner as you did in Step 3. Save and test your pages in a
browser. As you test your pages, use the CSS and XHTML validators to help you
find syntax errors.
5. Bonus Style: text-transform . Figure 6.26 shows an alternate design for the
music.html page. Notice how the <h2> elements are styled differently—with all
uppercase text (using a new property, text-transform ) different background
and text colors, font size, bottom border, and margin. Open javajam.css in a
text editor and replace the h2 selector style rules with the following:
h2 { text-transform: uppercase;
background-color: #ffffcc;
color: #663300;
font-size: 1.2em;
border-bottom: 1px solid #000000;
margin-right: 20px;
Save the javajam.css file. Test your pages in a browser. Your music.html page
should look similar to the one shown in Figure 6.26. The other pages do not use
<h2> elements and should appear as they did at the end of Step 4.
In this case study you changed the page layout of the JavaJam Web site pages. Notice
that with just a few changes in the CSS and XHTML code, you configured a two-
column page layout.
Search WWH ::

Custom Search