Problem

JavaJam Coffee House Case StudyIn this chapter's case study you will use the JavaJam C...

JavaJam Coffee House Case Study

In this chapter's case study you will use the JavaJam Coffee House existing website (Chapter 8) as a starting point and modify the Menu page to display information in a table. Your new page will be similar to Figure when you have completed this case study. You have three tasks in this case study:

1. Create a new folder for this JavaJam case study.

2. Modify the style sheet (javajam.css) to configure style rules for the new table.

3. Modify the Menu page to use a table to display information as shown in Figure.

Task 1: Create a folder called ch9javajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 8 Case Study ch8javajam folder into the new ch9javajam folder.

Task 2: Configure the CSS. You will add styles to configure the table on the Menu page. Launch a text editor and open the javajam.css external style sheet file. You will add the new style rules above the media queries.

• Configure the table. Code a new style rule for the table element selector that configures a centered table (use margin: auto;) with an 80% width.

• Configure the table cells. Code a new style rule for the td and th element selectors that configures 10 pixels of padding.

• Configure alternate-row background color. The table looks more appealing if the rows have alternate background colors but is still readable without them. Apply the :nth-of-type CSS3 pseudo-class to configure the odd table rows with a medium brown background color (#D2B48C).

Save the javajam.css file.

Task 3: Update the Menu Page. Open the menu.html page for the JavaJam Coffee House website in a text editor. The menu descriptions are configured with a description list. Replace the description list with a table that has three rows and two columns. Use th and td elements where appropriate. Save your page and test it in a browser. If the page does not display as you intended, review your work, validate the CSS, validate the HTML, modify as needed, and test again.

Figure Menu page with a table.