HTML and CSS Reference
instructor directs you otherwise, use the Chapter 4 JavaJam Web site as a starting point
for this case study.
Figure 6.24 displays a wireframe for the two-column page layout with a page container,
logo, left column, right column, floating, and footer areas.
column page layout
Hands-On Practice Case
1. Create a Folder. Create a folder called javajamcss. Copy all the files from your
Chapter 4 javajam folder into the javajamcss folder. You will modify the
javajam.css file and each Web page file (index.html, menu.html, and music.html)
to implement the two-column page layout shown in Figure 6.24. See the new
JavaJam Home page, as shown in Figure 6.25 (shown also in the color insert
2. Configure the CSS. Open javajam.css in Notepad. Edit the style rules as follows:
Add the following style declarations to the container id: background color
( #e8d882 ), text color ( #000000 ), and a 2 pixel black double border ( border :
2px double #000000 ).
Configure the logo area. Create a new id named logo with a background
( #ccaa66 ) and text ( #000000 ) color, center alignment ( text-align: center ),
no margin ( margin: 0; ), and a bottom border that is 2 pixels, double, and
black ( border-bottom: 2px double #000000 ).
Configure the left column navigation area. Add the following style rules to the
nav id to configure an area that floats to the left, is 100 pixels wide, and has
10 pixels of padding on the top side.